Question

对于我的自适应网站，我使用视口元标记强制设备以“首选”屏幕分辨率显示页面（不是实际设备分辨率，而是“最小”分辨率，初始比例为1.0）。

视口元标记：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">

这似乎适用于所有设备，但是，在移动Chrome上，有时在IOS设备上，首次/未缓存访问不会立即检测到设备的“首选”分辨率，但通信实际屏幕分辨率。

设置重现错误（在页面的头部）：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript">
    alert(window.innerWidth);
</script>

首次/未缓存访问将为我的Nexus 5显示“980”，第二次访问/刷新将显示所需的“360”。

有没有人知道强制窗口使用初始比例的方法，没有javascript超时或窗口上载解决方法？

已编辑： 在window.onload之后检查window.innerWidth返回所需的“首选”宽度。这是我现在的解决方法......

Answer 1

我找到了一个解决方案： window.innerWidth 以某种方式延迟，并在早期 not-viewport-resized 文档宽度的值>页面加载阶段。在早期页面加载阶段计算窗口宽度时， document.documentElement.clientWidth 似乎没有问题。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript">
    // So use this to calculate device width rules before window.onload
    alert(document.documentElement.clientWidth);
</script>

注意：稍后您可以使用window.innerWidth，例如在window.onload之后。

首次访问时移动Chrome中有时会忽略HTML视口代码

1 个答案: