iOS Safari - disable pinch to zoom option

3
votes

I have an issue with zooming. I want to block pinch to zoom in Mobile Safari on HTML elements. I use script to prevent default behavior of browser and it is working fine for normal pinching, but when I start scroll with one finger and later add second and pinch Safari still zooming the page...

Has anyone any idea how can I block this zooming?

I'am creating mobile game using canvas and use HTML for message windows so please don't write that it is a bad idea to block zooming for accessibility reasons.

Code to prevent zooming:

document.addEventListener("touchmove", function(event) {
  event = event.originalEvent || event;

  if(event.touches.length > 1 || event.scale > 1) {
    event.preventDefault();
  }
}, false);

UPDATE:

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

This meta tag doesn't work because Apple disable it in Mobile Safari since iOS 10 up to accessibility reasons

1
javascriptiosmobile-safaridom-events
Do you have things such as user-scalable=no in your meta viewport command? – Mr Lister
Apple disable user-scalable=no in iOS 10 for accessibility reasons – Paweł Gawlas
I didn't know. Sorry. But thanks for mentioning this. – Mr Lister
@PawełGawlas "acessibility reasons" is the also a good excuse to curtail HTML5 webpage applications to provide a "native-app" feeling, Remember Apply makes no money if you can ship an app as a webpage, instead of an AppStore-Item. – humanityANDpeace

1 Answers

0
votes

can you test it?

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);