如何防止在Safari移动浏览器上捏缩放（滚动）？
[英]How to prevent pinch to zoom (on scroll) on safari mobile browser?
问题描述
I need my web application to behave as a native mobile app. 
我需要我的Web应用程序充当本地移动应用程序。 For this I needed to prevent pinch-to-zoom and double tap zooming on all browsers. 为此，我需要防止在所有浏览器上进行捏缩放和双击缩放。 In Chrome and Firefox it was easy: 在Chrome和Firefox中，这很容易：
<meta name="viewport" content="width=device-width, user-scalable=no" />
On Safari its a challenge. 在Safari上，这是一个挑战。 Here I found how to prevent pinch-to-zoom and to disable double-tap-zoom. 在这里，我找到了如何防止捏缩放和禁用双击缩放。 But when you are scrolling and pinching to zoom, its zooming. 但是，当您滚动并捏以缩放时，它就会缩放。 My question is if there is way to block it also on scrolling? 我的问题是是否还有办法在滚动时阻止它？
2 个解决方案
解决方案1
0 2018-08-14 23:09:12
Combined with the javascript preventDefault solution in your link; 与您的链接中的javascript preventDefault解决方案结合使用； you can use the following to disable pinch in and out page-wide. 您可以使用以下内容在整个页面上禁用放大和缩小。
<style>
html,
body {
position: fixed;
overflow: hidden;
}
</style>
And wrap everything inside <body> in a master wrapper with the following CSS 并使用以下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>
You in effect disable all body/html level scrolling, and then re-enable scrolling a level below inside the master wrapper, which includes elastic and momentum scrolling. 实际上，您禁用了所有body / html级别的滚动，然后重新启用了在主包装内下方的级别的滚动，其中包括弹性和动量滚动。 When these elements scroll, the pinching is already ignored. 当这些元素滚动时，捏合已被忽略。
Drawbacks 缺点
1 - If you have fixed or absolute elements, then the scrolling becomes very janky. 1-如果您具有fixed或absolute元素，则滚动将变得非常混乱。
2 - There also seems to be a strange bug where-by part of the page will be modified, and pinch becomes available again, if you scroll down from high on the page. 2-似乎还有一个奇怪的错误，如果您从页面的高处向下滚动，则页面的一部分将被修改，并且夹点再次变为可用。 I think it might be related to the vh property and there's probably a JS solution to set the element height/width better. 我认为这可能与vh属性有关，并且可能有一个JS解决方案可以更好地设置元素的高度/宽度。
解决方案2
0 2018-11-21 17:52:26
If you want to ignore all events that can scroll the body content, you can bind a function to the touchmove event that prevents default behavior and stop propagation of the event: 如果要忽略所有可以滚动正文内容的事件，可以将函数绑定到touchmove事件，以防止默认行为并停止事件的传播：
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
}, false);
In jQuery or similar libraries: 在jQuery或类似的库中：
$(document.body).on("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.