1

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)

Community
  • 1
  • 1
leech
  • 8,293
  • 7
  • 62
  • 78

1 Answers1

2

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">
micred
  • 1,482
  • 1
  • 19
  • 19
  • Thank you for posting, but I'm looking for a way to control zoom in javascript so that i don't have to redo code/projects for Android and IOS. – leech Jan 30 '12 at 18:26
  • This wasn't exactly what i was looking for (it can't work for IOS of course), but it did solve the problem in Android. In android you have to make a customized build anyway. – leech Feb 01 '12 at 16:46
  • webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); for fullscreen – letroll Feb 16 '12 at 15:39
  • @micred when ever i am redirecting to another page form index.html the zoom doesn't work – Subrat nayak. Aug 03 '12 at 09:22