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

Posted 2023-03-31

【中文标题】如何在响应式设计中禁用缩放功能？

【英文标题】：How to disable zooming capabilities in responsive design?

【发布时间】：2012-11-04 03:12:55

【问题描述】：

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

有什么办法可以控制吗？

【问题讨论】：

***.com/questions/4472891/…

【参考方案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 岁，可以阅读 *** 的小文本。这不是您手机上的辅助功能设置的用途吗？专门为您覆盖页面，而不是强迫设计师为少数人编写臃肿的代码？

“30 岁以上的人无法在移动设备上阅读文字”，这本身就是一个非常具有区分性的假设。我已经 30 岁以上，我可以在 4 英尺外以正常字体大小阅读短信。

SMS，但在亚马逊上尝试小字体，然后尝试放大并让页面适应并移动对您重要的字段。基本上我是说页面应该标准化，设备应该可以应付。那里有一些令人震惊的网站，就像 WAP 时代一样糟糕。

【参考方案3】：

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

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