How to prevent pinch to zoom (on scroll) on safari mobile browser?

问题

I need my web application to behave as a native mobile app. For this I needed to prevent pinch-to-zoom and double tap zooming on all browsers. In Chrome and Firefox it was easy:

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

On Safari its a challenge. 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?

回答1:

Combined with the javascript preventDefault solution in your link; 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

<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. When these elements scroll, the pinching is already ignored.

Drawbacks

1 - If you have fixed or absolute elements, then the scrolling becomes very janky.

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. I think it might be related to the vh property and there's probably a JS solution to set the element height/width better.

回答2:

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:

document.body.addEventListener("touchmove", function(event) {
    event.preventDefault();
    event.stopPropagation();
}, false);

In jQuery or similar libraries:

$(document.body).on("touchmove", function(event) {
    event.preventDefault();
    event.stopPropagation();
});

Link

来源：https://stackoverflow.com/questions/49349637/how-to-prevent-pinch-to-zoom-on-scroll-on-safari-mobile-browser

标签

ios

iphone

mobile-safari