Threaded View

  1. #1
    Sencha User grgur's Avatar
    Join Date
    Aug 2007
    Split, Croatia
    Vote Rating
    grgur has a spectacular aura about grgur has a spectacular aura about


    Default Android orientation change scaling bug

    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 ( {
                // 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);
    Attached Images
    <div style="float: left; width: 70px;"></div><div style="float: left; height: 100px;">Grgur Grisogono
    Ext JS in Action SE co-author
    Exercising awesomeness at Modus Create - Official Sencha Partner

    Get in touch for Sencha Touch Training
    @ggrgur</div><div style="clear:both;"></div>

Thread Participants: 1