Preventing Zoom in Phonegap + JQuery Mobile

Question

I'm building a PhoneGap + JQuery Mobile app, but I can't seem to prevent it from zooming in with a double click. I followed the tips listed at http://www.tricedesigns.com/2012/01/17/mobile-web-phonegap-html-dev-tips/, specifically by adding:

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

Does anyone know of a solution for zooming?

Answer 1

Try:

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

This is what I use and I don't get any zooming behavior.

Here is the Apple documentation for the viewport meta tag: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Answer 2

Place "user-scalable=no" in to your meta tag

like this

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

This is the best way to stop zoom in mobile, Its work for me in phonegap