视口元标记在 Android 上无法按预期工作

Posted 2023-03-12

【中文标题】视口元标记在 Android 上无法按预期工作

【英文标题】：Viewport meta tag not working as expected on Android

【发布时间】：2017-04-09 15:48:28

【问题描述】：

我制作了一个响应式网站，并使用视口元标记来修复不同设备上的缩放。我还使用 javascript 告诉设备不要缩放到 525 像素以下，因为这是我的 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/

【参考方案1】：

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

在您的情况下，您过度限制了浏览器。如果 window.innerWidth

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