1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    546
    Vote Rating
    18
    estesbubba will become famous soon enough

      0  

    Default Way to hide URL bar with autoMaximize: false?

    Way to hide URL bar with autoMaximize: false?


    Looking at the API it appears that setting autoMaximize: true isn't recommended. If that is the case is there any other way to cause the iOS URL bar to auto hide? When you have the URL bar, title bar, and tab bar, there just isn't much "work area" left on iPhone. iPad is fine because the URL bar always shows and you have a lot more real estate.

    What are people doing for this?

    autoMaximize : Boolean
    Whether or not to always automatically maximize the viewport on first load and all subsequent orientation changes.
    This is set to false by default for a number of reasons:
    • Orientation change performance is drastically reduced when this is enabled, on all devices.
    • On some devices (mostly Android) this can sometimes cause issues when the default browser zoom setting is changed.
    • When wrapping your phone in a native shell, you may get a blank screen.
    Defaults to: false


  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    29
    Vote Rating
    0
    FBlack is on a distinguished road

      0  

    Default


    same problem

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    546
    Vote Rating
    18
    estesbubba will become famous soon enough

      0  

    Default


    Since we aren't wrapping in native, I wonder if this is the safest bet? All my testing on iPhone shows no problems with fullscreen and I don't see a performance difference either way. Android scares me with all the devices out there so I think leaving it false for them.

    Code:
        viewport: {
            autoMaximize: Ext.os.is.iOS
        },

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Setting it to true is generally safe on iOS, apart from version 3. It is very flakey on Android and messes up native packaging though.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    546
    Vote Rating
    18
    estesbubba will become famous soon enough

      0  

    Default


    Quote Originally Posted by rdougan View Post
    Setting it to true is generally safe on iOS, apart from version 3. It is very flakey on Android and messes up native packaging though.
    Thanks Robert! Here is what I'm going to do:

    Code:
        viewport: {
            autoMaximize: Ext.os.is.iOS && Ext.browser.version.isGreaterThan(3)
        },

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    546
    Vote Rating
    18
    estesbubba will become famous soon enough

      1  

    Default


    Here is my latest setting.

    Code:
        viewport: {        autoMaximize: !Ext.browser.is.Standalone && Ext.os.is.iOS && Ext.browser.version.isGreaterThan(3)
        },
    Reason why is:

    http://www.sencha.com/forum/showthread.php?214253-viewport-autoMaximize-true-causes-problems-launching-from-iOS-home-screen&p=821745#post821745



  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    28
    Vote Rating
    0
    Null can only hope to improve

      0  

    Default


    this doesnt work for Chrome iOS on iphone, app never loads

  8. #8
    Touch Premium Member
    Join Date
    Feb 2011
    Posts
    17
    Vote Rating
    2
    sdebois is on a distinguished road

      2  

    Default


    I have:
    !Ext.browser.is.Standalone && Ext.browser.is.Safari && Ext.os.is.iOS

    Reason to add Safari is that the browsers of most of the QRcode readers also do have a problem with autoMaximize

  9. #9
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    DougFisher is on a distinguished road

      0  

    Default In Browser on Android

    In Browser on Android


    Not as a Native app, but just running inside the default browser on my Android phone this settings in app.js works fairly well:
    Code:
       viewport: {
            autoMaximize: true
        },
    It does not seem to have any performance penalty.

    It works when the app/web page is first loaded, and works on orientation change. It does not work when you navigate to a new URL and then press the back button.
    The sencha code seems to confirm this. Only 2 cases were handled: (ready and orientationchange)
    Code:
        applyAutoMaximize: function(autoMaximize) {
            if (Ext.browser.is.WebView) {
                autoMaximize = false;
            }
            if (autoMaximize) {
                this.on('ready', 'doAutoMaximizeOnReady', this, { single: true });
                this.on('orientationchange', 'doAutoMaximizeOnOrientationChange', this);
            }
            else {
                this.un('ready', 'doAutoMaximizeOnReady', this);
                this.un('orientationchange', 'doAutoMaximizeOnOrientationChange', this);
            }
    
    
            return autoMaximize;
        },
    I suggest you add a handler for onDOMContentLoaded as that seems to be fired when the page is reloaded with the back arrow (and might also handle the case of the zoom level changing).

  10. #10
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    546
    Vote Rating
    18
    estesbubba will become famous soon enough

      0  

    Default


    Quote Originally Posted by sdebois View Post
    I have:
    !Ext.browser.is.Standalone && Ext.browser.is.Safari && Ext.os.is.iOS

    Reason to add Safari is that the browsers of most of the QRcode readers also do have a problem with autoMaximize
    This seems to be the best way so far. I have tested with both iPhone and iPad using Safari, Chrome, Adobe Edge Inspect, and native using PhoneGap. All seems well.