Android-- PhoneGap/WebView ignores viewport meta tags?

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".

---

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.

---

I've try

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

Zoom is not enabled.

With the following setting, zoom enabled

this.appView.getStrings().setSupportZoom(true);

But it's not controlled correctly by the viewport tag, all page are zoomable now even with minimum-scale=1 and maximum-scale=1 set in the viewport tag.

And the page navigation got error now, clicking the button on page and the android back button is not working correctly.

---

There are good answers here but the Cordova API seem to have changed a bit.

In the OnCreate method (after loadUrl or after you call init explicitly):

    CordovaWebViewEngine engine = appView.getEngine();
    SystemWebView webView = (SystemWebView)engine.getView();
    WebSettings settings = webView.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);

---

If you want android to scale your content to fixed width (1024 in example) use this:

<meta name="viewport" id="viewport" content="width=1024">
<script type="text/javascript">
    var viewPortWidth = 1024;
    function setViewport() {
    if ((navigator.userAgent.toLowerCase().indexOf("android")!=-1)) {
        var wW0 = window.screen.width;
        var scale = wW0/viewPortWidth;
        var vPort = "width="+viewPortWidth+", maximum-scale="+scale+", minimum-scale="+scale+", initial-scale="+scale+", user-scalable=yes";
        document.getElementById("viewport").setAttribute("content", vPort);
    }
    }
    setViewport();
</script>

Also, you should add event listener for onorientationchange to call setViewport function.

---

I use this on iphone with phonegap

<meta name="description" content="trevorrudolph.com">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://trevorrudolph.com/wordpress/apple-touch-icon.png">