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

same problem :(

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

---

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.

Quote:

---

Originally Posted by rdougan

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)
    },

---

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

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

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

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

Quote:

---

Originally Posted by sdebois

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.