Results 1 to 2 of 2

Thread: Android orientation change scaling bug

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User grgur's Avatar
    Join Date
    Aug 2007
    Location
    Split, Croatia
    Posts
    155
    Vote Rating
    26
      0  

    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:

    Code:
    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);
        }
    };
    Attached Images Attached Images
    <div style="float: left; width: 70px;">http://appac.us/mcs.png</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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,326
    Vote Rating
    1297
      0  

    Default

    Now that we got that superclass all fixed up
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Posting Permissions

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