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

Question

A user reported that the Viewport meta tag is being ignored on his phone, but it works everywhere I've tested. Why would viewport work on one Android device and fail on another with the same OS version?

This is on a Phonegap 3.5 Android app that lays out everything to a set size (1800x1200) and then scales it to the device's size using viewport, like so:

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

This works fine everywhere I've tried it. Works in the latest Firefox and Chrome, works when compiled to Android and run on a Nexus 5 or a Nexus 10 or Galaxy 3, and also when run on the emulator for SDK 19, 20 or 21. The only place I've seen it fail is on SDK 17 (Android 4.2.2) or lower, but that should not be an issue, as I have android-minSdkVersion set to 19 (Android 4.4.2).

My problem is that a user reported that the Viewport setting is being ignored (the text is huge) on his Sony Xperia Z. So my question is, how is it possible for Viewport support to vary on phones with the same OS? For example, is it possible for two 4.4.2 phones to have different webkits?

Edit - is it possible that android-minSdkVersion is being ignored? I haven't been able to confirm the user's SDK version, but when I try to install the production apk to a 4.2.2 emulator, it lets me. I expected an "unsupported sdk" error or something...

Answer 1

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.

Answer 2

Did you confirm if the user is using the phone's built-in browser, or Chrome or Firefox Mobile? It's very possible that the webkit can be tweaked from phone to phone. For example, my Droid Turbo comes with Chrome as its default browser, but my Samsung Galaxy S3 had a system-browser that was webkit-based, which I replaced with Chrome.

More likely, the issue you are experiencing is that the meta tag does not support an ID. You didn't include specific source, but standard meta tag markup is this:

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

If your code looks like:

<meta name="viewport" content="...etc...">

Then trying to access it with document.getElementById() is going to give you sporadic results, if it works at all.

What you're going to have to do is search for the meta tag in some other fashion, like:

var vp = document.querySelector('[name="viewport"]');

Then you can work with vp as an object, along the lines that you're already expecting.

For more information on querySelector: https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector