我已经尝试了question中的所有解决方案(是的!!!),而iOS 11.3似乎没有任何作用?
有人成功阻止了iOS 11.3的缩放吗? PS:我知道有充分的理由不防止捏缩...。但是我别无选择。非常感谢您,我的英语也很抱歉。
答案 0 :(得分:5)
请注意,这些选项中的大多数会破坏许多功能,并且不利于可访问性等,但是某些应用程序(尤其是多点触控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);
答案 1 :(得分:1)
只需将touch-action: pan-y
样式添加到body
标记中即可。那应该防止缩放。