HTML & JS：如何在移动设备（iOS）上打开带有视口的网站，默认情况下是小视口？答案

【问题标题】：HTML & JS: how to open website with viewport on mobile devices (iOS) with small viewport by default?HTML & JS：如何在移动设备（iOS）上打开带有视口的网站，默认情况下是小视口？
【发布时间】：2016-05-30 06:09:36
【问题描述】：

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

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>

和css：

...

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

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

我做错了什么？

如何在桌面模式下即时检测宽度并直接应用而不闪烁屏幕？

【问题讨论】：

是否有充分的理由指定宽度而不使用width=device-width，以便设备可以调整布局视口？
@denmch 我的最小宽度为 640px - 如果设备宽度为 540px - 它会滚动 - 这是个坏主意
@brabertaser1992 获得屏幕尺寸后为什么不直接重定向页面？

标签： javascript jquery html ios css

【解决方案1】：

来自 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");  
}

【讨论】：

每次都有效吗？我的意思是它会在加载之前找到视口节点吗？

【解决方案2】：

我会推荐一种更简单的方法。根据媒体查询，可以链接到单独的 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> 中。这样做还可以确保在显示内容之前加载它。

【讨论】：

我没有反对，但这并不能解决问题。第一，除非你有一个拥有数十万行 CSS 的大型网站，否则最好将所有 CSS 一起放在一个文件中。例如。 26,000 多行 CSS 运行大约 350Kb - 但压缩后只有 45Kb - 这比 3x 15Kb 请求便宜。第二，无论您加载什么样式，视口元标记都会控制浏览器呈现页面的大小——这是 OP 需要帮助的。这个问题没有纯 CSS 的解决方案。

【解决方案3】：

也许您可以在 CSS 中使用“方向”进行测试

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

我认为没有任何理由等待window.onload，因为这很可能会导致不需要的内容一闪而过。您的代码还将为大于 970 像素的屏幕设置两次该值 - 这是不必要的。您可以像这样编写元标记以获得最高效和最直接的结果。我会把它放在你的 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>

【讨论】：