如何在iOS 11.3 Safari中禁用视口缩放？

Question

我已经尝试了这个问题中所有的解决方案，但似乎在iOS 11.3上都不起作用。有人成功地防止了iOS 11.3的捏合缩放吗？ PS：我知道不应该禁止捏合缩放有很好的理由...但是我别无选择。提前感谢您的帮助，对我的英语表示抱歉。

- Friedrich Siever

---

“…and nothing seems to be working”. 很好（我在iPad上写作）。;-) 捏合缩放是一个很好的辅助功能，所以你应该保护它。 - RobG

@RobG 我知道，我知道 ;-) ... . 但顾客就是顾客... . 有时候他们会对任何建议都不太愿意听。 - Friedrich Siever

我（毫无疑问，这里的每个人）都感同身受。我提供这条评论作为支持，而非批评。;-) - RobG

@RobG，如果Safari有一个设置可以允许您启用捏合缩放，这对每个人来说是否都是更好的解决方案？有时不允许捏合缩放以保持基于Web的应用程序的功能性是必要的。并非我们所有人都希望仅通过Apple的Web商店构建“可访问”的应用程序。 - pathfinder

Answer 1

请注意，大多数这些选项会破坏很多功能，对可访问性等方面有害，但某些应用程序，特别是多点触控PWA需要禁用这些功能。自行承担风险。

关于父评论中提到已尝试链接中的所有解决方案，请注意“请注意，如果任何更深层次的目标在事件上调用stopPropagation，则该事件将无法传递到文档，并且此侦听器将无法防止缩放行为。”- 这是关键。

在iOS 11.3 Safari（在iPhone SE上测试过）上添加此脚本标记可以解决问题。

<script>
    document.addEventListener('touchmove',
        function(e) {
            e.preventDefault();
        }, {passive:false});
</script>

当然，您随后必须处理所有触摸输入（如果您需要自定义的多点触控PWA，无论如何都必须这样做）。

• 一个注意点是以这种方式禁用了滚动（也许有解决方法？），但是当您需要单个屏幕PWA时，这是一项优势。

• 另一个注意点是对于类似PWA的行为，内容本身最多需要

height:100%

这样，在Safari中的顶部和底部栏（URL和底部导航）就不会切断任何内容（至少在纵向方向上）。

最后一个注意点是，双击缩放在此模式下仍然有效。禁用它的最佳方法是在根节点上设置以下内容

touch-action:manipulation;

然而，仅在根节点可点击时才适用，因此请将空的onclick处理程序添加到该元素中。

最后，由于节点现在可点击，可能会出现您不想要的半透明覆盖层以供按钮使用，可使用以下代码隐藏：

-webkit-tap-highlight-color: rgba(0,0,0,0);

- Danny Yaroslavski

---

你如何在特定的div上启用滚动条？ - phil_lgr

Answer 2

只需将 touch-action: pan-y 样式添加到 body 标签即可。这样可以防止缩放。

- Dmitry Sokurenko