禁用 IOS 13 safari 上的捏合缩放

Question

I know this question has been asked so much. But have there been any updates on being able to disable pinch zoom on the latest version of safari?

I have a map application that implements pinch to zoom on specific elements of the webpage (the map). I want users to be able to zoom in on the map, while the UI around the page stays the same. This has destroyed my users experience on IOS.

Is there a way to at least disable pinch to zoom on specific elements?

Here is my webpage so you can see exactly what I'm talking about. I hope you can see why disabling viewport zoom (at least when the user pinches on the map) would actually be a benefit, for accessibility.

https://www.yapms.com/app/?t=USA_2020_presidential

more info: I'm using hammerjs to zoom in on specific elements on the webpage already, so I want to disable apples viewport zoom on those elements.

Answer 1

Maybe this event listener on the document will help

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

Resource: disable viewport zooming iOS 10+ safari?

Please see Casper Fabricius answer for detailed elaboration about this

Answer 2

None, of the JavaScript solutions worked for me. What I did to fix the issue on IOS was to add the following CSS to each element that I wanted to prevent the default zoom action on.

touch-action: none;

Answer 3

I think the most likely use case for apps built with web tech will be that you do not want the user to manually pinch zoom, but you still need them to scroll in the Y co-ordinate. You can enable this on the whole app by targeting the html tag in css. Disabling pinch zoom is necessary for web based "apps" to behave like "apps". Accessibility can be accommodated in different ways, such as offering preferences to adjust text sizes. I tested this on Safari and Edge on iPhoneX OS ver 13.5.1

<style type="text/css" media="screen">
        html {
            -webkit-text-size-adjust: none;
            touch-action: pan-y; /*prevent user scaling*/
        }
</style>

Answer 4

I have used a combination of touch-action and pointer-events to disable all gestures everywhere and allow basic touching only on interactive elements. Works well in Safari in iOS 15. Can be modified to allow some gestures, eg, by replacing none by pan-y etc. I have used it to implement control panels or games that involve quick touching of buttons, which lead to unwanted zoom and scroll gestures.

* {
    touch-action: none;
    pointer-events: none;
}

input, button {
    pointer-events: auto;
}

Also, fixed position efficiently bypasses scrolling and keeps the elements on the screen.

html, body {
    position: fixed;
}