时间戳

首页 > 解决方案 > 如何在 iOS 11.3 Safari 中禁用视口缩放？

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

问题描述

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

有人在使用 ios 11.3 防止捏缩放方面取得了成功吗？PS：我知道有充分的理由不防止捏缩放...... 但我别无选择。非常感谢提前和对不起我的英语。

标签： javascriptcssmobile-safariscaleios11.3

解决方案

请注意，这些选项中的大多数会破坏许多功能并且不利于可访问性等，但是某些应用程序，特别是多点触控 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);

推荐阅读