Question

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

1024px+＆amp; 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>

和css：

...

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

有时在iOS设备上，我首先看到css样式的大分辨率（1024px +），并且只有在缩放或重新加载页面后，才能获得适用于iPad和iPhone的520px（在纵向模式下）。

我做错了什么？

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

Answer 1

我会推荐一种更简单的方法。可以根据媒体查询链接到单独的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' />

在这种情况下，您还可以非常轻松地拆分内容，并且由于您将媒体查询分开，所以一切都变得更易读。

您必须将这些链接放在文档的<head>内。这样做还可以确保在显示内容之前加载它。

Answer 2

将bootstrap与移动优先解决方案结合使用。无需跟踪每个JavaScript的分辨率或编写一大堆媒体查询。

Answer 3

来自MDN：

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像，脚本，链接和子框架已完成加载。

要在加载所有内容之前激活脚本，您应该能够执行此操作，而不需要window.onload()：

if (screen.width > 521) {
   document.getElementById("viewport").setAttribute("content", "width=520; initial-scale=0.5");  
}
if (screen.width > 970) {
   document.getElementById("viewport").setAttribute("content", "width=1024; initial-scale=0.5");  
}

Answer 4

Mayby你可以用＆＃34;方向测试＆＃34;在你的CSS

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

Answer 5

我没有看到任何等待window.onload的理由，因为这很可能会导致不需要的内容闪现。对于大于970px的屏幕，您的代码也会为该值设置两次 - 这是不必要的。您可以像这样编写元标记，以获得最高效和最直接的结果。我会尽可能地将它放在你的HEAD中，理想情况是在任何样式或其他脚本之前：

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

HTML＆amp; JS：默认情况下如何使用小视口在移动设备（iOS）上打开带有视口的网站？

5 个答案: