如何在iOS 11.3 safari中禁用视口缩放？ [英] How to disable viewport zooming in iOS 11.3 safari?

问题描述

我已经尝试了所有（是的所有!!!）来自此问题<的解决方案/ a>似乎没有任何东西可以用于iOS 11.3？

I ve tried all (yes all!!!) the solutions from this question and nothing seems to be working with iOS 11.3?

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

Did someone had success with preventing pinch to zoom with ios 11.3? PS: I know that there are good reasons not to prevent pinch zooming... . But I have no choice. Many Thanks in Advance and sorry for my English.

推荐答案

请注意，大多数这些选项都会破坏大量功能并且对可访问性等有害，但有些应用程序，特别是多点触控PWA需要禁用这些功能。使用风险自负。

关于父评论，他们已经尝试了链接中的所有解决方案，请注意请注意，如果任何更深层的目标在事件上调用stopPropagation，则事件将不会到达文档，并且此侦听器将不会阻止缩放行为。 - 这是关键。

添加此脚本标记适用于iOS 11.3 Safari（在iPhone SE上测试）

Adding this script tag works on iOS 11.3 Safari (tested on iPhone SE)

<script>
    document.addEventListener('touchmove',
        function(e) {
            e.preventDefault();
        }, {passive:false});
</script>

当然，您必须处理所有触摸输入（如果您在需要一个定制的，多点触控的PWA，无论如何你真的要做）。

Of course, you'd then have to handle all touch inputs (which, if you're in need of a custom, multi-touch PWA, you really have to do anyway).

• 有一点需要注意的是，滚动是以这种方式禁用的（可能有解决方法吗？）但是当你需要一个单一的时候屏幕PWA这是一个加号。

• One caveat is that scrolling is disabled this way (maybe there's a workaround?) but when you are in need of a single screen PWA this is a plus.

另一个警告是，对于类似PWA的行为，内容本身最多需要

Another caveat is that for PWA-like behaviour, the content itself needs to be at most

height:100%

这样，Safari中的顶部和底部栏（URL和底部导航）不会切断任何内容（至少在纵向方向上）。

That way the top and bottom bars in Safari (URL and bottom navigation) don't cut off any content (at least in portrait orientation).

最后一个需要注意的是，在这种模式下，双击缩放功能仍可正常工作。禁用它的最佳方法是在根节点上设置以下内容

One last caveat is that double-tap to zoom still functions in this mode. Best way to disable it is to set the following on a root node

touch-action:manipulation;

但是，这仅在根节点可点击时有效，因此添加一个空的 onclick 该元素的处理程序。

However, this only works when the root node is clickable, so add in an empty onclick handler to the element.

最后，因为该节点现在是可点击的，它可能具有用于按钮的半透明叠加层可能不想要，可以隐藏

Lastly, because the node is now clickable, it may have that semi-transparent overlay for buttons you may not want, which can be hidden with

-webkit-tap-highlight-color: rgba(0,0,0,0);

这篇关于如何在iOS 11.3 safari中禁用视口缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！