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

Question

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

有没有办法控制它？

Answer 1

创建一个 META 视口标签，并将用户可缩放属性设置为“否”，如下所示：

<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">

Answer 2

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

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

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

Answer 3

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

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