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

Question

我已经尝试了所有（是的所有！！！）这个 question 的解决方案，但似乎没有任何东西适用于 iOS 11.3?

有人成功地阻止了 ios 11.3 的捏合缩放吗？ PS：我知道有充分的理由不阻止缩放...。但我别无选择。非常感谢，对不起我的英语。

Answer 1

请注意，这些选项中的大多数会破坏很多功能并且不利于可访问性等，但是某些应用程序，特别是多点触控 PWA 需要禁用这些功能。使用风险自负。

关于他们已经尝试了 link 中所有解决方案的家长评论，请注意 "Note that if any deeper targets call stopPropagation on the event, the event will not reach the document and the scaling behaviour will not be prevented by this listener."- 这是关键。

添加此脚本标签适用于 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);
```

Answer 2

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

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

How to disable viewport zooming in iOS 11.3 safari?

javascript

css

mobile-safari

scale

ios11.3