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

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

• javascript
• ios
• web-applications
• safari
• mobile-safari

2 Answers 2

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

A mon 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" />

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.