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.)

Solution 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" />

Solution 2

What the meta tag do is when you view your page in the browser, it adds an option to add your page to the homescreen. When you open your page via the homescreen shortcut, it will be in fullscreen and navigator.standalone will be set to true. This is what people refer to when they speak of the fullscreen mode.

Comments

[Pointy]

Ah! Well it would have been kind-of friendly for Apple to have mentioned that interesting tidbit in the documentation. Thanks very much! (And yes I've got the viewport tag too.)

[Joshua Smith]

This project is a nice way to get the user to do the add thing: cubiq.org/add-to-home-screen

[Joshua Smith]

They do, just not the documentation you were looking at :) developer.apple.com/library/ios/#DOCUMENTATION/…

[Santiago Rebella]

You can also use window.scrollTo(0, 1); I think is the same due to stackoverflow.com/questions/1925671/…, but not sure about which is recommended to use.

[Santiago Rebella]

window.scrollTop(); in a variable and scrolling to that variable makes it full screen to the same place of the page in orientation changes

[Pointy]

Well the scroll thing provides a temporary solution, but it doesn't help with the browser footer on small screens (iPod touch or phones).

[Joshua Smith]

I noticed this weekend that in iOS 6, the browser is now ditching the footer when you go landscape. Perhaps getting your users to turn sideways will be easier than getting them to add you to their home screen?

[NicklasF]

And just to add that you have to add the page to homepage after you added the meta tag.