iPad WebApp Full Screen in Safari

Question

Apple says in the Safari HTML reference that the below code is supposed to make the the web-app full screen on iPhone OS 2.1 and later.

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

But it doesn't seem to work. Is there a way of hiding the title/location bar within Safari in an iPad WebApp?

Answer 1

This only works after you save a bookmark to the app to the home screen. Not if you just browse to the site normally.

Answer 2

If you want to stay in a browser without launching a new window use this HTML code:

<a href="javascript:this.location = 'index.php?page=1'">

Answer 3

1. First, launch your Safari browser from the Home screen and go to the webpage that you want to view full screen.

2. After locating the webpage, tap on the arrow icon at the top of your screen.

3. In the drop-down menu, tap on the Add to Home Screen option.

4. The Add to Home window should be displayed. You can customize the description that will appear as a title on the home screen of your iPad. When you are done, tap on the Add button.

5. A new icon should now appear on your home screen. Tapping on the icon will open the webpage in the fullscreen mode.

Note: The icon on your iPad home screen only opens the bookmarked page in the fullscreen mode. The next page you visit will be contain the Safari address and title bars. This way of playing your webpage or HTML5 presentation in the fullscreen mode works if the source code of the webpage contains the following tag:

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

You can add this tag to your webpage using a third-party tool, for example iWeb SEO Tool or any other you like. Please note that you need to add the tag first, refresh the page and then add a bookmark to your home screen.

Answer 4

It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header...

Answer 5

This site has a working workaround, same effect, uses some javascript to set the first child div to total height of viewport. http://webapp-net.com/Demo/Index.html