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

Posted 2023-03-06

【中文标题】响应式设计损坏（仅在 iPhone 上）- 可以使用 javascript 强制执行媒体查询吗？

【英文标题】：Broken responsive design (on iPhone only) - can media queries be forced with javascript?

【发布时间】：2016-01-11 01:55:51

【问题描述】：

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

这就是我的网站在手机上的外观：

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

问题来了：

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

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

我只是希望 iPhone 能够正确地接受我的响应规则，就像其他所有事情一样。

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

我真的在为此苦苦挣扎，并且已经有一段时间了。任何解决方案将不胜感激。

我已尝试对我的 CSS 进行大量更改，但无济于事。所以现在我目前的想法是尝试使用 javascript 来解决问题。

有没有办法强制使用 javascript 进行媒体查询？

或者我有什么方法可以使用 javascript 来阻止 iPhone 错误地显示这个网站？

但我不确定这是否有效或有帮助。我更喜欢 CSS 解决方案，但更改 CSS 根本没有任何区别，所以我绝望地希望 javascript 能帮助我。

如果有帮助，请查看此处的代码 - http://www.moonshineandfuggles.com/

【问题讨论】：

或者我有什么办法可以使用 javascript 来阻止 iPhone 错误地显示这个网站？ - 你可以使用 navigator.userAgent 找出用​​户代理并显示一些消息.

我的意思是，您可以根据用户代理停止显示页面。是的，这并不能解决您的实际问题。

【参考方案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)
 

【讨论】：

嗨！感谢您成为唯一一个回答我的问题的人，经过一些调整，我设法让它工作 - 非常感谢！