10

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.

Fish
  • 303
  • 4
  • 10

4 Answers4

12

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

antonio yaphiar
  • 450
  • 3
  • 9
7

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;
Fish
  • 303
  • 4
  • 10
2

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>
Chris M.
  • 608
  • 6
  • 10
  • This is the method I've see million dollar websites using. – Jay Aug 14 '21 at 07:27
  • The lack of pinch-to-zoom is a deficiency of native apps. There is no need to imitate that deficiency. Having it built into mobile browsers saves developer time and money. Outside of the asker's special case of a map (where a specialized pinch-to-zoom replaces the browser's), or maybe a videogame or an editor like Figma, pinch-to-zoom should not be disabled, as it is an extremely familiar affordance for most users. This is just basic UX design! – hegel5000 Aug 08 '23 at 16:00
  • Disabling pinch-to-zoom isn't the goal here. I have a website were I have built a user interface around the main application. The issue is when the user tries to zoom in on the main application, it also zooms in the entire interface. I need more fine grained control over what parts of the application get zoomed in when the user pinches on different things. – Fish Aug 13 '23 at 21:53
0

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, e.g., 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;
}
ivop
  • 85
  • 1
  • 4