Android视口(viewport)设置 "user-scalable=no"打破视口(viewport)的宽度/缩放级别

Question

我正在开发一个宽度为 640 像素的网络应用程序。

在文档中head我设置了

  <meta name="viewport" content = "width=640, user-scalable=no" />

因此内容可以很好地显示和水平拉伸(stretch)。
这在 iOS 上完美运行，但在 Android 中，浏览器会打开放大的网站，因此用户必须双击才能缩小整个页面。

当我更改视口(viewport)设置以省略 user-scalable 标记时:

<meta name="viewport" content="width=640" />

Android 浏览器可以很好地调整到 640 像素 - 所以它可以工作。
然而现在的问题是，由于未设置 user-scalable 标签，因此用户可以在 Android 和 iOS 上放大和缩小。

如何在 Android 上禁止缩放并同时将视口(viewport)宽度设置为 640 像素？

Answer 1

尝试像这样渲染视口(viewport)元标记:

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

设置缩放设置将限制用户缩放的距离，因此如果您将初始值和最大值设置为相同的量，这应该可以解决问题。

更新:通过设置以下内容，我能够一起修复我的 Android 设备错误:

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

我还注意到某些内容，例如 p 标签没有在屏幕上流动，因此解决方法是将带有空字符串的 background-image 属性添加到任何卡住且没有穿过屏幕的内容中布局 View 。希望这次对您有所帮助。