Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable pinch zoom on IOS 13 safari

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.

like image 330
Fish Avatar asked Oct 23 '19 14:10

Fish


Video Answer


1 Answers

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

like image 158
antonio yaphiar Avatar answered Sep 22 '22 14:09

antonio yaphiar