Monday, April 11, 2016

Can't disable pinch zoom (and double tap) zooming on a web app in iOS Safai

Leave a Comment

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?

1 Answers

Answers 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 : http://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

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment