Viewport元标记在Android上无法正常工作

Question

我创建了一个响应式网站，并使用视口元标记来修复不同设备上的缩放。 我还使用JavaScript告诉设备不要缩放到525px以下，因为这是我的body元素的最小宽度：

<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />

window.onload = function () {
    if(window.innerWidth <= 525) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=525');
    }
}

这几乎适用于我测试过的几乎所有设备; 特别是它适用于iOS移动设备（iPhone / iPad）。 该网站完美缩放，一切都适合屏幕，用户无需水平滚动，放大或缩小。

但是，在Android设备上查看网站时，它不符合预期的屏幕。 为了确保所有内容都适合屏幕，用户必须稍微缩小。 这推断视口在Android设备上无法正常工作。 有什么想法吗？

我基本上希望网站加载到每个设备上并完全适合屏幕，因此用户无需缩小内容以适应。

该网站的链接是： www.wyevalleycampers.com/Version2/

Answer 1

当页面内容比设备视口宽时，Chrome将加载完全缩小的页面，以便所有内容都可见。

在您的情况下，您已经过度约束了浏览器。 如果window.innerWidth <= 525，则用户的设备的视口宽度小于525px。 然后，您告诉浏览器渲染为525px宽的布局。 由于您已将最小和初始比例设置为1，因此浏览器无法缩小以显示所有内容。 它需要缩小，因为在scale = 1时，视口小于您的内容宽度。 删除初始和最小比例应该有所帮助。

Apple最近停止尊重视口元标记的user-scalable属性，我猜他们可能不会因为同样的原因而尊重minimum-scale 。