Android- Phonegap/Webview Ignores Viewport Meta Tags

Android 4.1 viewport scaling ( setInitialScale, meta initial-scale not working)

You should be able to add some javascript to your webpages that will scale the content when picked up by your webview. Here is an example that will scale your html content so that the content fits to the available width of the screen:

function customScaleThisScreen() 
    var contentWidth = document.body.scrollWidth, 
        windowWidth = window.innerWidth, 
        newScale = windowWidth / contentWidth;
    document.body.style.zoom = newScale;
}

This will work on older (pre 4.2) and newer chromium-based (4.2+) webviews.

Viewport setting ignored in Phonegap Android app, but only on certain phones?

As discussed in the comments, the problem was that the user was using 4.2.2 (where viewport is known to be dodgy) due to phonegap setting a lower minSdkVersion than I had specified in config.xml. I'm trying to figure out why that might be [here][1].

Anyway, if you are here because of viewport issues, the useful things that came out of my research and my discussion in the comments with Jason M. Batchelor are:

• Make sure meta is really being updated (see Jason's answer)
• Make sure the minsdk is 19+, viewport behavior seems problematic on older OSes

• After much testing, the viewport setting that has worked best for me is:

  var scale = windowHeight/appHeight;
  var vport = "width=device-width, user-scalable=yes, initial-scale="+scale+",
  minimum-scale="+scale+", maximum-scale="+scale+", target-densitydpi=device-dpi";
  document.getElementById("viewport").setAttribute("content", vport);

However YMMV, it appears to depend on some of the CSS you use, whether you have any divs wider than the viewport, and possibly other things, so I would recommend testing on every sdk you support.

Related Topics