iPad WebApp Full Screen in Safari

83
votes

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?

6
ipadweb-applicationsiphone-standalone-web-app

6 Answers

120
votes

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

16
votes

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'">
14
votes

  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.

7
votes

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

1
votes

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

0
votes

Looks like most of the answers on this thread have not kept up. iOS Safari on iPads have fullscreen support now and it's very easy to implement using javascript.

Here's my full article on how to implement fullscreen capability on your web app.