Using the Apple meta tag for full-screen web app

Question

I'm trying to use the

<meta name="apple-mobile-web-app-capable" content="yes">

tag to get iOS Safari to show a page without the browser stuff; at least, that's what I think it's supposed to do for me. (The Apple documentation doesn't go into extensive detail.)

So far, I can't get it to do anything. Here is a JSBin example. With or with out the <meta> tag, the page comes up on both an iPod Touch and an iPad 2 with the browser stuff at the top (and bottom on the little screen).

Is there something else that needs to happen in order to affect the browser? Or are my expectations of how it should work just incorrect? (Note that, via weinre, I've checked the "windows.navigator.standalone" flag, and it appears to be false.)

Answer 1

That only does what you want when the user adds a link to your app to their home screen.

A common approach for the in-browser case is to add a call to window.scroll(0,1) which will get the browser stuff off the top of the screen. (There is no way to clear the bottom stuff.)

Also, you might want a tag to say you do not want scaling:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1" />