html - Android-- PhoneGap/WebView ignores viewport meta tags?

Question

I have a webpage that I'm trying to display on my Android device (loaded from the assets directory of the project) using PhoneGap (which uses a normal WebView set as the "appview"), but the webview completely ignores the following:

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

No matter what I set in this line (I've tried explicitly setting the zoom, setting the width/height in pixels, etc.), the device completely ignores it and renders the website very small and anchored to the upper left-hand corner of the screen. I can zoom in using the pinch gesture (even if I explicitly disable zoom in the html code above), but I want the page to be zoomed-in to properly fit the device on load.

Here's the interesting bit... If I put the exact same site on my web server and navigate to it using the default browser on my test device, the page loads properly (scaled to the right size for the device).

Please help.

Thanks.

EDIT1:

My current settings are:

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

That too is completely ignored.

EDIT2:

Here's something interesting...

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

The above line scales the page to 2x in the emulator yet changes nothing on my device (Samsung Epic running 2.2.1). Still though, even at 2x, the page is not being scaled to the emulator's width... I'd have to set that to something like "initial-scale=2.5".

Answer 1

Try adding the following two lines in the onCreate() method of the Java class that extends DroidGap.

this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

Let me know if your viewport tag now begins to work.