Javascript HTML&；JS：默认情况下，如何在移动设备（iOS）上使用小视口打开网站？

默认情况下，在我的应用程序中，我有两个分辨率（宽度）：

1024px+

和

520px

我有这样的想法：

<meta name="viewport" content="width=520, initial-scale=0.5" id="vwPrt">
<script>
  window.onload = function () {
    if(screen.width > 521) {
        var vpEl = document.getElementById('vwPrt');
        vpEl.setAttribute('content','width=520, initial-scale=1');
    }
    if(screen.width > 970) {
        var vpEl = document.getElementById('vwPrt');
        vpEl.setAttribute('content','width=1024, initial-scale=1');
    }
  }
</script>

有时在iOS设备上，我第一次看到大分辨率（1024px+）的css样式，只有在缩放或重新加载页面后，我才能在iPad和iPhone上看到520px（纵向模式）

我做错了什么

在桌面模式下，如何在不闪烁屏幕的情况下动态检测宽度并直接应用宽度？

来自MDN：

加载事件在文档加载过程结束时激发。在 此时，文档中的所有对象都在DOM中，并且 图像、脚本、链接和子帧已完成加载

要在加载所有内容之前启动脚本，您应该能够在不使用

window.onload（）的情况下执行此操作：

我会推荐一种更简单的方法。根据媒体查询，可以链接到单独的CSS文件

您需要做的是：

<link rel='stylesheet' media='all and (min-width: 0px) and (max-width: 520px)' href='css/small_devices.css' />
<link rel='stylesheet' media='all and (min-width: 520px) and (max-width: 970px)' href='css/medium_devices.css' />
<link rel='stylesheet' media='all and (min-width: 970px)' href='css/large_devices.css' />



在这种情况下，您还可以非常轻松地分割内容，并且由于您将媒体查询分开，因此所有内容都变得更可读

您必须将这些链接放在文档的
中。这样做还将确保在显示内容之前加载此文件
 也许你可以用CSS中的“方向”进行测试

@media all and (orientation:portrait) and (min-width:0px) and (max-width:520px){...}

使用移动优先解决方案。
无需跟踪每个JavaScript的分辨率或编写一大堆媒体查询。
我看不出有任何理由等待
窗口。onload
，因为这很可能会导致不需要的内容一闪而过。您的代码还将为大于970px的屏幕设置两次该值-这是不必要的。您可以像这样编写meta标记，以获得最高效和即时的结果。我会尽可能在你的脑海中把这一点放高，最好是在任何样式或其他脚本之前：

<script>
    var width = 'device-width';
    if(screen.width > 521) {
        width = '520';
    }
    if(screen.width > 970) {
        width = '1024';
    }
    document.write('<meta name="viewport" content="width=' + width + ', initial-scale=0.5" id="vwPrt">');
</script>


变量宽度='设备宽度'；
如果（屏幕宽度>521）{
宽度='520'；
}
如果（屏幕宽度>970）{
宽度='1024'；
}
文件。写（“”）；
是否有充分的理由指定宽度而不使用
width=device width
，以便设备可以调整布局视口？@denmch我的最小宽度为640px-如果设备宽度为540px-它将滚动-这是一个坏消息idea@brabertaser1992你为什么不在得到屏幕大小后重定向页面呢？这样行吗每次？我的意思是，它会在加载之前找到视口节点吗？我没有向下投票，但这并不能解决问题。首先，除非你有一个包含数十万行CSS的大型网站，否则最好将所有CSS放在一个文件中。26000多行CSS运行大约350Kb，但只有45Kb被压缩，这比3x 15Kb的请求要便宜。第二，无论加载什么样式，viewport meta标记都控制浏览器呈现页面的大小，这正是OP需要帮助的地方。这个问题没有唯一的解决方案。
@media all and (orientation:portrait) and (min-width:0px) and (max-width:520px){...}

<script>
    var width = 'device-width';
    if(screen.width > 521) {
        width = '520';
    }
    if(screen.width > 970) {
        width = '1024';
    }
    document.write('<meta name="viewport" content="width=' + width + ', initial-scale=0.5" id="vwPrt">');
</script>