如何在响应式设计中禁用缩放功能？答案

【问题标题】：How to disable zooming capabilities in responsive design?如何在响应式设计中禁用缩放功能？
【发布时间】：2012-11-04 03:12:55
【问题描述】：

如何在使用 iPad、iPhone 和/或其他智能手机时禁用响应式设计页面中的放大和缩小功能。

有什么办法可以控制吗？

【问题讨论】：

stackoverflow.com/questions/4472891/…

标签： html css responsive-design meta-tags

【解决方案1】：

创建一个 META 视口标签，并将 user-scalable 属性设置为“no”，如下所示：

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

更新答案：-

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

【讨论】：

非常感谢，在您的帮助下这样使用<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
正确答案...但是使用它会失去基本功能，可能会使您的网站无法供有视力问题的人使用。
旁注：这不会阻止双击缩放。

【解决方案2】：

这几乎是对 30 岁以上的任何人的歧视，抑制变焦只会迫使他们使用老花镜。这可能是您的意图。

此类用户的解决方法之一是使用 RDP 或 VNC 来查看桌面浏览器并“捏”该视图。

问题应该是“如何禁用”或“如何抑制”。您当然应该使用用户代理字符串来识别您的设备。

【讨论】：

非常感谢您的建议，刚刚更改了问题标题
我 45 岁，可以阅读 StackOverflow 的小文本。这不是您手机上的辅助功能设置的用途吗？专门为您覆盖页面，而不是强迫设计师为少数人编写臃肿的代码？
“30 岁以上的人无法在移动设备上阅读文字”，这本身就是一个非常具有区分性的假设。我已经 30 岁以上，我可以在 4 英尺外以正常字体大小阅读短信。
SMS，但在亚马逊上尝试小字体，然后尝试放大并让页面适应并移动对您重要的字段。基本上我是说页面应该标准化，设备应该可以应付。那里有一些令人震惊的网站，就像 WAP 时代一样糟糕。

【解决方案3】：

要禁用缩放，请添加此脚本

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

【讨论】：