2

I am trying to disable pinch-zoom on a web app, but the following meta-tag is having zero effect in iOS Safari and iOS Chrome:

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

I tried adding the following to the meta tag, but I'm having no success there either. Pinch (and double-tap) zooming is still enabled.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Any insight into why those two meta tags might not be working?

Bangkokian
  • 6,548
  • 3
  • 19
  • 26
  • are you working on some cross platform(cordova,react native etc...) or just make an default web app ? – HardikDG Apr 04 '16 at 18:40

2 Answers2

1

For me following meta tags are working in both the scenarios

This works proper for cordova/Ionic project it disable the double tap/pinch on normal page 

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

I open a simple page with using jquery/bootstrap in iOS safari, this also disable the double tap/pinch zoom

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

You may check this codes if you have not tried that : https://stackoverflow.com/a/11689448/4557505

Also please provide some details about your web app is it default web app like html5/responsive or you are using any cross platform like cordova/Ionic, it will help in checking the specific scenario

Community
  • 1
  • 1
HardikDG
  • 5,892
  • 2
  • 26
  • 55
1
 a {touch-action: manipulation;} button {touch-action: manipulation;}

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

This works Perfectly on safari browser

Om Infowave Developers
  • 1,525
  • 15
  • 40
dinesh
  • 11
  • 2