Prevent iPad web app from showing Safari address bar

6
votes

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?

3
ipadsafarijquery-mobileweb-applicationsaddress-bar

3 Answers

7
votes

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.

5
votes

Add jQuery and you don't have to modify any links,

$(document).ready(function(){
    $('a').click(function(event){
        event.preventDefault();
        window.location.assign($(this).attr('href'));
    });
});

Example link:

<a href="nextpage.html">Next page without safari</a>
2
votes

maybe this: source

// When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});