Prevent iPad web app from showing Safari address bar

Question

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?

Solution 1

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.

Solution 2

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>

Solution 3

maybe this: source

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

Comments

[naugtur]

Yeah, but that's nasty. Setting device-height and some other mediaqueries can also turn the app fullscreen without breaking it for other browsers.

[Journeyman]

@naugtur - thanks for the comment. Are you saying that I can use standard <a href="bla"> links and it won't jump out of full screen? If so, what device-height and other settings do I need, and will it avoid the unappealing page-swap visual effect?

[naugtur]

<meta name="viewport" content="width=device-width,height=device-height,initial-sca‌​le=1.0,maximum-scale‌​=1.0,user-scalable=n‌​o"> although this seems to break the orientationchange on an ipod. I didn't explore the subject.

[Journeyman]

@naugtur - I do have that tag already within the header, but on iOS 4.3.3 if you issue an <a href="sample.htm"> link then it jumps out of full-screen mode. I believe that jQueryMobile also exhibits this behaviour if you use such external links. The only workaround I have found is the window.location.assign(). I'm interested in why you consider this to be nasty - is it not supported by all browsers? - thanks for the input.

[naugtur]

Ok, you got me cornered, I take that back. :) I just haven't seen this thing in use before and I assumed it wasn't cross browser. So it's not that nasty, but it breaks the JQM DOMcaching, which isn't exactly nice.

[Bongs]

@Journeyman using window.location.assign() works fine for the links making normal html request but create problem for those links which are making ajax call (get/post request). Is there any way to fix it?

[Journeyman]

@Bongs - I don't understand why ajax calls are any different to the window.location.assign. You still call Javascript from the link itself, then make the ajax call from within javascript code and update any html elements with the ajax return html. All works fine for me, without any jumping out of full-screen.

[Bongs]

@Journeyman - I'm working on Ruby-On-Rails, where in route.rb I've defined POST calls for some functions. And I doubt because of window.location.assign(), it makes a GET call request and gives me error that route not defined. I'm looking into it.

[Oskar Austegard]

This might work for iOS Phone and Android browsers, but it won't work on an iPad.

[nKognito]

And what about browser's history in this case? Will it store all previous locations and will Back button work properly?