html - 防止放大 ios 和 android 浏览器

Question

试图找到一种方法来防止用户能够在最新的 ios 和 android 中放大网页。

我试过了：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">

...还：

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

...和：

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

但它仍然是可缩放的

还有其他解决方案吗？

谢谢

标签： htmlcssmobile

Answer 1

这实际上取决于您使用的浏览器版本，每个浏览器版本都有自己的 html 代码来限制缩放。

如果您使用 android 2.2 或更低版本 根本不支持 Android 2.3.x/3.x：通过设置 user-scalable=no 您也可以自己禁用视口元标记的缩放。这可能就是您的宽度选项无效的原因。要允许浏览器缩放您的内容，您需要设置 user-scalable=yes，然后要禁用缩放，您可以将最小和最大缩放设置为相同的值，这样它就不会缩小或增长。玩弄最初的比例，直到您的网站完全适合。

Android 4.x：与 2.3.x 相同的规则适用，除了不再支持最小和最大比例，如果您使用 user-scalable=yes 用户始终可以缩放，将其设置为“否”意味着忽略您自己的比例，这是我现在面临的问题，它把我引向了这个问题......你似乎不能在 4.x 中同时禁用缩放和缩放。

iOS/Safari（4.x/5.x 测试）：缩放按预期工作，您可以使用 user-scalable=0 禁用缩放（关键字是/否在 4.x 中不起作用）。iOS/Safari 也没有 target-densitydpi 的概念，所以你应该把它排除在外以避免错误。您不需要最小值和最大值，因为您可以按预期方式关闭缩放。只使用宽度，否则你会遇到 iOS 方向错误

Chrome：缩放像在 iOS 中一样按预期工作，最小值和最大值受到尊重，您可以使用 user-scalable=no 关闭缩放。结论：在一些基本的浏览器/设备检测之后，您可以使用一些相当简单的 JS 来相应地设置内容。我知道这种类型的检测是不受欢迎的，但在这种情况下，这几乎是不可避免的，因为每个供应商都做了自己的事情！希望这可以帮助人们对抗视口，如果有人有在不使用视口的情况下禁用 Android 4.x 缩放的解决方案，请告诉我。

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

Android 4.x Chrome 浏览器（我认为大多数国家/地区都预装了）：您可以确保用户无法缩放并且页面是全屏的。缺点：您必须确保内容具有固定宽度。我还没有在较低的 Android 版本上测试过这个。为此，请参阅示例：

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

iOS/Safari 8 Beta 4：有一个 meta 标签 minimum-ui 在 ios 7 版本中运行良好，但现在已被 Apple 在此版本中删除。