Android orientation change scaling bug

[grgur]

On certain Android devices (e.g. Samsung Galaxy S2), we found a bug that rescales the viewport on orientation change. This specifically happens when orientation is changed back to portrait.

Take a look at this snapshot to review the issue:


The issue is a result of multiple Android Browser bugs. You may or may not have noticed it, but it does affect your web application if you are targeting the Android population.

The fix is fairly simple and involves resetting the viewport on orientation change. For a more in-depth bug review (with video), visit this blog post: Orientation change zoom bug with Android and Sencha Touch 1 – FIXED

Essentially, here's what you need to do:

App.view.Viewport = Ext.extend(Ext.Panel, {
    // 1 - activate orientation monitoring for this component
    monitorOrientation: true,
    initComponent : function() {
        // 2 - only trigger for the offending OSs
        if (Ext.is.Android) {
            // 3 - cache the meta tag reference
            var viewport = Ext.DomQuery.selectNode('meta[name=viewport]');
            this.on('orientationchange', function () {
                // 4 - reset the viewport settings with a high-enough width
                var reset =  'width=10000, initial-scale=1.0, '
                          + 'minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';
                viewport.setAttribute('content', reset);
            });
        }
        App.view.Viewport.superclass.initComponent.call(this);
    }
};