如何防止在 Safari 移动浏览器上捏缩放（滚动）？答案

【问题标题】：How to prevent pinch to zoom (on scroll) on safari mobile browser?如何防止在 Safari 移动浏览器上捏缩放（滚动）？
【发布时间】：2018-03-18 15:26:48
【问题描述】：

我需要我的 Web 应用程序作为本机移动应用程序运行。为此，我需要防止在所有浏览器上进行捏合缩放和双击缩放。在 Chrome 和 Firefox 中这很容易：

<meta name="viewport" content="width=device-width, user-scalable=no" />

在 Safari 上是一个挑战。 Here 我发现了如何防止捏合缩放和禁用双击缩放。但是当你滚动和捏缩放时，它的缩放。我的问题是是否有办法在滚动时也阻止它？

【问题讨论】：

请不要这样做，这会破坏预期的行为，这是糟糕的用户体验 - 如果某些东西太小，我想放大它。
我知道这是不好的做法。但是老板想要这种行为。
这根本不是一个坏习惯。这只是伪装成可访问性功能的 Apple 的帮助。启用或禁用网页行为的决定必须留给网络开发人员。

标签： ios iphone mobile-safari

【解决方案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

【讨论】：