Question

I have a phone gap app that enables/disables zoom dynamically. The app allows Zooming on pages with detailed diagrams, and for the rest of the app disables zoom.

Zoom is altered using the Meta viewport tag:
Enabled:

 <meta id="viewport" name="viewport"
        content="initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0, user-scalable=yes" />

disabled:

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

My problem is that it is possible for a user to zoom in and then go to a page that has zoom disabled. Here they will be locked at the zoomed in level.

I found how to detect the problem here:

Safari iPhone – How to detect zoom level and offset?

But is there a way to programatically, and preferably in JavaScript (to keep the phonegap app crossplatform without custom work), set the zoom level? (presently I am refreshing the document, that works, but it’s probably the slowest possible way to handle it)

Answer 1

Concerning Android you can change the zoom programmatically from native code (java) accessing directly to the WebView object.

E.g.:

appView = (WebView) findViewById(R.id.appView);
appView.setInitialScale( (int)globalScale );
appView.getSettings().setSupportZoom( true );
appView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
appView.getSettings().setUseWideViewPort(true);
...

If you need to trigger zoom modification from javascript I could suggest to write your own Phonegap plugin (it’s not too hard) that bind javascript code to native code that access directly to the WebView object.

Remember, I think you should avoid to specify extra attributes to the meta tag of your HTML, otherwhise they can override WebView settings. Put just

<meta name="viewport" content="target-densitydpi=device-dpi">