Results 1 to 2 of 2

Thread: Android orientation change scaling bug

  1. #1
    Sencha User grgur's Avatar
    Join Date
    Aug 2007
    Split, Croatia
    Vote Rating

    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 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>

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Now that we got that superclass all fixed up
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts