tag To ...">
Geek Answers Handbook

Using the Apple Meta Tag for a Full-Screen Web Application

I'm trying to use

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

To make iOS Safari display a page without browser content at least that’s what I think it should have done for me. ( Apple documentation does not contain details.)

Until now, I can’t get him to do anything. Here is an example of JSBin. With or without the <meta> tag, the page appears on both iPod Touch and iPad 2 from the browser at the top (and bottom on the small screen).

Is there anything else that needs to happen to affect the browser? Or my expectations about how this should work incorrectly? (Note that through weinre, I checked the “windows.navigator.standalone” flag and it looks like false .)

+7
source share
2 answers

This only does what you want when the user adds a link to your application on their home screen.

A general approach for the browser case is to add a call to window.scroll(0,1) , which will display the contents of the browser at the top of the screen. (There is no way to clear the bottom.)

In addition, you may need the tag to say that you do not want to scale:

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

What the meta tag does when you view your page in a browser, it adds the ability to add your page to your desktop. When you open the page through the desktop shortcut, it will be in full screen mode, and navigator.standalone will be set to true. This is what people talk about when they talk about full screen.

+3
source

More articles:


All Articles