Full Screen mode in iOS7 Safari

Question

I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.

http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps. The old window.scrollTo() which worked for iOS6 no longer works.

Answer 1

Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">

More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7