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?

score 120 · Accepted Answer · answered Jun 11 '10 at 18:14

120

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

answered Jun 11 '10 at 18:14

jamone

17,253
17
63
98

13

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. – Scott Chu Jul 23 '13 at 10:03
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? https://pastebin.com/iSFDXjFz here is the head section of my app.blade.php file. Thanks in advance. – Frantumn Apr 01 '19 at 20:38

score 17 · Answer 2 · answered Mar 18 '13 at 22:43

First, launch your Safari browser from the Home screen and go to the webpage that you want to view full screen.
After locating the webpage, tap on the arrow icon at the top of your screen.
In the drop-down menu, tap on the Add to Home Screen option.
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.
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.

You could have said that this is a direct copy of an instruction found at http://www.ispringsolutions.com/articles/how-to-make-a-webpage-full-screen-on-an-ipad.html :-) — Jochem Schulenklopper, May 19 '14 at 20:25
And maybe they have copied mine. :) Look at the date that I have answered to this question and compare it with their publish date. — Code.Town, May 22 '14 at 00:33

score 16 · Answer 3 · edited Dec 14 '11 at 14:21

16

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

edited Dec 14 '11 at 14:21

sjngm

12,423
14
84
114

answered Jul 25 '11 at 16:37

Remco de Jong

193
1
2

4

This doesn't seem relevant to the question or topic at hand. Perhaps you could explain how it relates? – skeggse Aug 28 '12 at 04:52
8

Very relevant. It is always the very next issue after getting the web app full screen. – shrimpwagon Aug 13 '13 at 14:21
For me, the next issue is "how do I refresh the page now that it is in full screen mode?" – Nick Feb 15 '17 at 18:41

score 7 · Answer 4 · answered Mar 23 '11 at 22:37

7

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

answered Mar 23 '11 at 22:37

Joop Stringer

71
1
1

http://stackoverflow.com/questions/6429492/how-do-you-keep-an-ipad-web-app-in-full-screen-mode/7841521#7841521 – Alpha Codemonkey Oct 20 '11 at 20:03

score 1 · Answer 5 · answered Jun 28 '11 at 07:15

1

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

answered Jun 28 '11 at 07:15

xiatica

1,546
2
20
24

score 0 · Answer 6 · answered Mar 01 '19 at 20:27

0

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.

answered Mar 01 '19 at 20:27

Marvin Danig

3,738
6
39
71

iPad WebApp Full Screen in Safari

6 Answers6

Linked