如何在iOS 11.3野生动物园中禁用视口缩放?

时间:2018-06-26 11:06:14

标签: javascript css mobile-safari scale ios11.3

我已经尝试了question中的所有解决方案(是的!!!),而iOS 11.3似乎没有任何作用?

有人成功阻止了iOS 11.3的缩放吗? PS:我知道有充分的理由不防止捏缩...。但是我别无选择。非常感谢您,我的英语也很抱歉。

2 个答案:

答案 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标记中即可。那应该防止缩放。