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?

Ennius

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.

Roundhead

If you add this meta tag to your old url webpage which you've browsed previously on Safari, you need to refresh the url first then add it to homescreen to make the meta tag work. – Furtado

This isn't working for me on a laravel project. I added this to my app.blade layout template. This is used by each of my pages, so the header should (and does) appear on each page. Yet, I still have Safari bars on my iPhone and iPad even after doing a lot of tests to clear cache, re-create the home screen shortcut as mentioned in this post. Is there something else that could prevent the safari bars from hiding? pastebin.com/iSFDXjFz here is the head section of my app.blade.php file. Thanks in advance. – Almagest

Answer 2

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.

Dunford

You could have said that this is a direct copy of an instruction found at ispringsolutions.com/articles/… :-) – Deadradeadweight

And maybe they have copied mine. :) Look at the date that I have answered to this question and compare it with their publish date. – Dunford

Cheers! This is a kind of you. :) – Dunford

Answer 3

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

Gredel

This doesn't seem relevant to the question or topic at hand. Perhaps you could explain how it relates? – Sucking

Very relevant. It is always the very next issue after getting the web app full screen. – Ashmead

For me, the next issue is "how do I refresh the page now that it is in full screen mode?" – Announce

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

Walleyed

#6429992 – Cown

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

Harlin

Answer 6

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.

Grubby