首页 > 编程语言> 文章详细

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

2019-08-28 01:45:52 阅读：189 来源： 互联网

标签：javascript css mobile-safari scale ios11-3

我已经尝试了所有(是的所有!!!)来自这个question的解决方案,似乎没有任何东西可以用于iOS 11.3？

有人成功防止使用ios 11.3进行缩放吗？
PS：我知道有充分的理由不防止捏缩放….但我别无选择.非常感谢,对不起我的英语.

解决方法:

请注意,大多数这些选项会破坏大量功能,并且对可访问性等不利,但某些应用程序,尤其是多点触控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);

标签：javascript,css,mobile-safari,scale,ios11-3
来源： https://codeday.me/bug/20190828/1746981.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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