在移动设备上禁用缩放答案

【问题标题】：Disable Zoom on mobile devices在移动设备上禁用缩放
【发布时间】：2017-09-27 18:30:39
【问题描述】：

我按照本指南禁用移动设备的缩放功能。

正如许多其他人所建议的那样，该指南建议使用：

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

我已经尝试过这个和视口的几种变体，但我无法让它工作。此外，在查看我遵循的指南中的示例时，我意识到它也不起作用。

任何关于为什么这不起作用的想法以及关于如何使它起作用的任何建议将不胜感激！

【问题讨论】：

【解决方案1】：

这个应该可以的：

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

【讨论】：

也许你的一些 html 元素比 100% 宽。尝试通过注释掉（暂时删除）<body></body> 标记内的所有 html 来修复它，然后将其一一放回。或者首先尝试使用非常简单的正文内容，例如<body><h1>Hello</h1></body>，然后尝试缩放。如果正文内容最少（不能缩放）没问题，那么这个错误就在你的 html 代码中。
在测试上述内容时也禁用任何 css。也许一个 css 规则弄乱了 html 或 body 标记。
嗯，我试试看！我很好奇为什么我使用的示例也不起作用。在手机上查看上面的链接
对我来说，演示链接可以在 Android 上正常运行：不允许缩放。

【解决方案2】：

您的代码没问题，问题是特定于 iOS 的。引用自 stackoverflow 上的另一个问题：

对于寻找 iOS 10 解决方案的人来说，user-scaleable=no 是在 iOS 10 的 Safari 中禁用。原因是 Apple 正试图通过允许人们放大网页来提高可访问性。

【讨论】：

【解决方案3】：

我做了一个简单的应用程序。我有机会使用max-zoom: 3;

注意； max-zoom: 3 代码运行禁用双击。即使添加了min-zoom: 3，此注释也是正确的。

【讨论】：