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

Question

There are hundreds of posts across SO and the rest of the internet about trying to fix viewport scaling in Android, and I'm now fairly certain that you just cannot set the initial-scale in a webview on Android 4.1.

I'm building a Cordova (Phonegap) app, and I've got every thing scaled nicely on the iPhone 3GS, 4S and 5 and an iPad 2, running iOS7 and the 3GS on iOS6

I've also got the UI scaled to fit on the Moto G, LG Nexus 5, Google Nexus 5 and Samsung Galaxy S4, all running Android 4.4

But on a Samsung Galaxy S2 and S3 Mini running Android 4.1, I cannot set the initial-scale.

The HTML viewport meta tag doesn't work on 4.1 or 4.4 (works in Chrome, not in the WebView or default browser):

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

I've knocked up an absolutely basic Cordova project from the cli, cordova create basicProject, and if I add some Java to the onCreate method in the main Activity, specifically the setInitialScale method:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.init();
    // Set by <content src="index.html" /> in config.xml
    super.loadUrl(Config.getStartUrl());
    //super.loadUrl("file:///android_asset/www/index.html");

    this.appView.setInitialScale( 50  );

}

Then I get the Moto G on 4.4 scaling as expected:

But exactly the same project running on the Galaxy S2, does not get scaled.

I'm limited to testing on Samsung devices with 4.1, or a range of devices on 4.4, so if anyone can test the same thing on 4.2 or 4.3, or anyone on 4.1 not with a Samsung that'd be helpful.

Does anyone know how to get Android 4.1 to obey setInitialScale()

Answer 1

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.

Answer 2

@Petey showed me the solution but for completeness here's my version with a little more phonegap context:

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {

        // PETEY'S SOLUTION, WRAPPED IN CODE TO CHECK FOR ANDROID PRE 4.2
        // ALSO MODIFIED TO USE DEVICE PIXEL RATIO, INSTEAD OF CONTENTWIDTH
        if( isAndroid() ) {
            var matches = device.version.match( /[0-9]+(\.[0-9]+)?/i );

            if( matches.length && parseFloat( matches[ 0 ] ) < 4.2 ) {
                document.body.style.zoom = 1 / window.devicePixelRatio;
            }
        }

        // start app logic

    }
};

app.initialize();

function isAndroid() {
    if( device.platform.match( /android/i ) ) {    
        return true;
    }

    return false;
}