I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar). I have therefore added the following meta-tags to the site master page:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">
I start the app from the iPad home page and it starts nicely in full-screen mode (not showing the Safari address bar) but when I click a to another page in the site (with the same meta-tags, as inherited from the same site master page) then the address bar suddenly pops into view (and remains in view). The link looks as follows (I am using jQueryMobile):
<a href="/Home" data-ajax="false">Home</a>
How can I force the web app to remain looking like a 'native-app' by keeping the address bar hidden when navigating between internal pages?
Best Answer
It would appear that Mobile Safari does not 'natively' support full-screen if you use external links. As soon as you use an html anchor then it flips out of full-screen mode. The window.scrollTo may be a workaround that will work for some people, but I also want to avoid the way that the UI flips itself when transitioning to the non-full-screen mode too.
The answer is to use window.location.assign(). This keeps the full-screen app in 'native' full-screen mode. You just need to refactor your tags into javascript window.location.assign(url) calls - that then keeps the thing in full-screen.