Question

我制作了一个自适应网站，并使用了视口元标记来修复不同设备上的缩放比例。我还使用JavaScript告诉设备不要缩放到525px以下，因为这是我的身体元素的最小宽度：

<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＆lt; = 525，则用户的设备的视口宽度小于525px。然后，您告诉浏览器渲染为525px宽的布局。由于您已将最小和初始比例设置为1，因此浏览器无法缩小以显示所有内容。它需要缩小，因为在scale = 1时，视口小于您的内容宽度。删除初始和最小比例应该有所帮助。

Apple最近停止尊重视口元标记的@mock.patch('testing.scratch.mock_test.Car') def mockedCar(mockedCar): mockedCar.return_value.poweredBy.return_value.getEngineType.return_value = 'SmallAndSlow' print getEngineType(mockedCar)属性，我猜他们可能因为同样的原因而不尊重user-scalable。

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

1 个答案: