为固定视口大小禁用移动设备上的缩放答案

【问题标题】：Disable zoom on mobile devices for fixed viewport size为固定视口大小禁用移动设备上的缩放
【发布时间】：2017-05-03 07:11:26
【问题描述】：

我正在尝试禁用移动设备上的缩放功能。我知道这段代码会起作用。

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

但就我而言，我没有使用“width=device-width”的选项。我必须将视口大小设置为 480px，所以我使用以下代码

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

但我可以在移动设备上放大页面视图，并且可以将其缩小。

【问题讨论】：

你试过这样吗 content="width=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
是的，我得到与 480px 相同的结果

标签： html css

【解决方案1】：

使用“target-densitydpi=device-dpi”和代码

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

解决了我的问题。感谢Dave Rook

【讨论】：

【解决方案2】：

我认为你最好使用 100% 而不是 480

【讨论】：

【解决方案3】：

我最近遇到了一个类似的问题，当我第一次加载我的页面时，我需要它完全显示在移动设备上，但它会根据我的固定视口宽度不断放大到设备的宽度.这是我所拥有的：

<meta name="viewport" content="width=820", initial-scale=1.0" />

我删除了initial-scale=1.0，之后就没有问题了。当然，您仍然可以使用user-scalable=no 来避免无法按您的要求进行缩放。

【讨论】：