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

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

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

这是我的网站，位于桌面计算机的浏览器中：

问题出在这里：

在iPhone上，我的网站有点响应，但有点不响应——看起来是这样的：

有人能解释为什么会这样吗

---

在我看来，iPhone正在接受一些响应规则，但不是全部。有关更多信息，我有以下元标记：

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

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

我只是希望iPhone能像其他任何东西一样正确地接受我的响应规则

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

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

我尝试了很多对CSS的修改，但都没有用。现在我的想法是尝试使用javascript来解决这个问题

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

或者我有没有办法用javascript阻止iPhone错误地显示这个网站

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

---

如果有帮助，请查看此处的代码-

我使用下面的代码根据设备类型加载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)
 }

函数loadDeviceSpecificFiles（）{
if（navigator.userAgent.toLowerCase（）.match（/android/）{
loadjscssfile（“and_filename.js”，“js”）；//动态加载js
loadjscssfile（“and_filename.css”，“css”）//动态加载css
/*iPhone支票*/
}else if（navigator.userAgent.toLowerCase（）.match（/iphone/）| | navigator.userAgent.toLowerCase（）.match（/ipad/）{
loadjscssfile（“ios_filename.js”，“js”）//动态加载js
loadjscssfile（“ios_filename.css”，“css”）//动态加载css
}
}
函数loadjscssfile（文件名、文件类型）{
if（filetype==“js”）{//如果文件名是外部JavaScript文件
var fileref=document.createElement（'脚本'）
fileref.setAttribute（“类型”、“文本/javascript”）
fileref.setAttribute（“src”，文件名）
}else if（filetype==“css”）{//如果文件名是外部css文件
var fileref=document.createElement（“链接”）
fileref.setAttribute（“rel”、“样式表”）
fileref.setAttribute（“类型”、“文本/css”）
fileref.setAttribute（“href”，文件名）
}
if（typeof fileref！=“未定义”）document.getElementsByTagName（“head”）[0].appendChild（fileref）
}

或者我是否可以使用javascript阻止iPhone错误显示此网站您可以使用

navigator.userAgent

查找用户代理并显示一些消息。我的意思是，您可以根据用户代理停止显示页面。是的，这并不能解决你的实际问题。嗨！谢谢你是唯一一个回答我问题的人，经过一些调整后，我成功地让这个工作-非常感谢！

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