如何防止在 Safari 移动浏览器上捏缩放（滚动）？
Posted
技术标签:
【中文标题】如何防止在 Safari 移动浏览器上捏缩放（滚动）？【英文标题】：How to prevent pinch to zoom (on scroll) on safari mobile browser? 【发布时间】：2018-03-18 15:26:48 【问题描述】：我需要我的 Web 应用程序作为本机移动应用程序运行。为此，我需要防止在所有浏览器上进行捏合缩放和双击缩放。在 Chrome 和 Firefox 中这很容易：
<meta name="viewport" content="width=device-width, user-scalable=no" />
在 Safari 上是一个挑战。 Here 我发现了如何防止捏合缩放和禁用双击缩放。但是当你滚动和捏缩放时，它的缩放。我的问题是是否有办法在滚动时也阻止它？
【问题讨论】：
请不要这样做，这会破坏预期的行为，这是糟糕的用户体验 - 如果某些东西太小，我想放大它。 我知道这是不好的做法。但是老板想要这种行为。 这根本不是一个坏习惯。这只是伪装成可访问性功能的 Apple 的帮助。启用或禁用网页行为的决定必须留给网络开发人员。 【参考方案1】：结合你链接中的javascriptpreventDefault解决方案；您可以使用以下方法禁用页面范围内的捏合和捏合。
<style>
html,
body
position: fixed;
overflow: hidden;
</style>
并使用以下 CSS 将 <body> 中的所有内容包装在主包装器中
<style>
.mainwrapper
width: 100vw;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
</style>
<body>
<div id="master_wrap">
...content...
</div> <!-- /master wrapper -->
</body>
您实际上禁用了所有 body/html 级别的滚动，然后在主包装器内重新启用滚动以下级别，其中包括弹性和动量滚动。当这些元素滚动时，捏合已经被忽略了。
缺点
1 - 如果您有 fixed 或 absolute 元素，那么滚动会变得非常卡顿。
2 - 似乎还有一个奇怪的错误，如果您从页面的高处向下滚动，页面的一部分将被修改，并且捏合再次可用。我认为它可能与vh 属性有关，并且可能有一个 JS 解决方案可以更好地设置元素的高度/宽度。
【讨论】：
【参考方案2】：如果您想忽略所有可以滚动正文内容的事件，您可以将一个函数绑定到 touchmove 事件，以防止默认行为并停止该事件的传播：
document.body.addEventListener("touchmove", function(event)
event.preventDefault();
event.stopPropagation();
, false);
在 jQuery 或类似库中：
$(document.body).on("touchmove", function(event)
event.preventDefault();
event.stopPropagation();
);
Link
【讨论】：
以上是关于如何防止在 Safari 移动浏览器上捏缩放（滚动）？的主要内容，如果未能解决你的问题，请参考以下文章
MobileSafari（iOS Safari）：有没有办法防止水平/垂直滚动“捕捉”？