破坏的响应式设计（仅限iPhone） - 可以通过JavaScript强制媒体查询？

Question

我在iPhone上对我的网站的响应性有问题。从我测试过的android和surface设备上看，这个网站看起来不错。但在苹果设备上给我带来了很多问题。

这是我的网站应该如何看手机：

这是我的网站在浏览器中的台式计算机上：

HERE存在的问题：

在我电话我的网站之类的去响应，但排序没有 - 它看起来像这样：

任何人都可以解释为什么这是怎么回事？

---

在我看来，iPhone正在挑选一些响应规则，但不是全部。欲了解更多信息，我有这样的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

我已经试过这些CSS媒体查询规则组合：

@media (max-width: 1100px) and (max-device-width: 1100px) 
@media (max-width: 1100px) and (max-device-width: 1100px) { 
@media only screen and (max-width : 767px) 
@media only screen and (min-width: 1024px) and (max-width: 1280px) 
@media only screen and (min-width: 993px) and (max-width: 1024px) 

和交替所有这些使得没有区别之间，他们都产生同样的问题如上图所示。

我只是想让iPhone正确接受我的响应规则，就像其他事情一样。

任何人都可以请帮我解释一下这个问题？

我真的很苦恼，而且已经有一段时间了。任何解决方案将不胜感激。

我已经尝试了很多更改到我的CSS，但无济于事。所以现在我现在的想法是尝试使用JavaScript来解决问题。

有什么办法来强制媒体查询与JavaScript？

或者有什么方法可以使用JavaScript来阻止iPhone显示本网站错误？

但我不确定这是否会起作用或有所帮助。我更喜欢CSS解决方案，但更改CSS并没有什么区别，所以绝望的我希望javascript能帮助我。

如果有帮助，看看这里的代码 - http://www.moonshineandfuggles.com/

Answer 1

我用下面的代码根据设备类型来加载CSS & JS文件，也可以尝试设置最大规模，用户可扩展，高度视标签 -

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, height=device-height"/> 



function loadDeviceSpecificFiles() { 
    if (navigator.userAgent.toLowerCase().match(/android/)) { 
     loadjscssfile("and_filename.js", "js"); //dynamically load JS 
     loadjscssfile("and_filename.css", "css") //dynamically load css 
      /*iPhone check*/ 
    } else if (navigator.userAgent.toLowerCase().match(/iphone/) || navigator.userAgent.toLowerCase().match(/ipad/)) { 
     loadjscssfile("ios_filename.js", "js") //dynamically load JS 
     loadjscssfile("ios_filename.css", "css") //dynamically load css 
    } 
} 


function loadjscssfile(filename, filetype) { 
    if (filetype == "js") { //if filename is a external JavaScript file 
     var fileref = document.createElement('script') 
     fileref.setAttribute("type", "text/javascript") 
     fileref.setAttribute("src", filename) 
    } else if (filetype == "css") { //if filename is an external CSS file 
     var fileref = document.createElement("link") 
     fileref.setAttribute("rel", "stylesheet") 
     fileref.setAttribute("type", "text/css") 
     fileref.setAttribute("href", filename) 
    } 
    if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref) 
}