损坏的响应式设计（仅在 iPhone 上）- 可以使用 javascript 强制媒体查询吗？

Question

我的网站在 iPhone 上的响应速度有问题。从我测试过的 android 和表面设备来看，这个网站看起来不错。但是在 Apple 设备上给我带来了重大问题。

这是我的网站在移动设备上的外观 phone:

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

问题来了：

在 iPhone 上，我的网站有点响应，但有点没有 - 它看起来像这样：

谁能解释为什么会这样？

在我看来 iPhone 正在采用一些响应规则，但不是全部。有关更多信息，我有这个元标记：

<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)

所有这些之间的交替没有区别，它们都会产生与上图所示相同的问题。

我只想 iPhones 像其他所有事情一样正确地接受我的响应规则。

谁能帮我解释一下这个问题？

我真的很挣扎，现在已经有一段时间了。任何解决方案将不胜感激。

我已经尝试对 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)
 }

损坏的响应式设计（仅在 iPhone 上）- 可以使用 javascript 强制媒体查询吗？

Broken responsive design (on iPhone only) - can media queries be forced with javascript?

javascript

css

iphone

ios

media-queries