Question

我需要我的网络应用程序才能充当原生移动应用程序。为此，我需要防止在所有浏览器上进行缩放和双击缩放。在Chrome和Firefox中很简单：

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

在Safari上面临挑战。 Here我找到了如何防止捏缩放和禁用双击缩放。但是当你滚动和捏缩放时，它会变焦。我的问题是，是否有办法在滚动时阻止它？

Answer 1

与链接中的javascript preventDefault解决方案结合使用；您可以使用以下内容在整个页面上禁用放大和缩小。

<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解决方案可以更好地设置元素的高度/宽度。

Answer 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移动浏览器上防止捏缩放（滚动）？

2 个答案: