Best IT Recipes

IPad WebApp Full Screen in Safari

Apple says in the HTML Safari link that the code below should make a full-screen web application on iPhone OS 2.1 and later.

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

But that does not work. Is there a way to hide the title / local bar in Safari in iPad WebApp?

+73
web-applications ipad iphone-standalone-web-app
Jun 11 '10 at 16:20
source share
5 answers

This only works after saving the bookmark in the application on the main screen. Not if you are just browsing the site normally.

+108
Jun 11 '10 at 18:14
source share

If you want to stay in the browser without opening a new window, use this HTML:

 <a href="javascript:this.location = 'index.php?page=1'">
+11
Jul 25 '11 at 16:37
source share

  • First, launch the Safari browser from the main screen and go to the web page that you want to view in full screen.

  • After placing the webpage, click the arrow icon at the top of the screen.

  • Click "Add to Home Screen" in the drop-down menu.

  • The Add to Main window should be displayed. You can customize the description, which will be displayed as a title on the main screen of your iPad. When you're done, click the Add button.

  • Now a new icon will appear on the main screen. Clicking on the icon will open the web page in full screen mode.

Note. The icon on the main screen of the iPad only opens a bookmark in full screen mode. On the next page you will see the Safari address and headers. This way to play your webpage or HTML5 presentation in full screen 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 web page using a third-party tool like the iWeb SEO Tool or whatever you like. Please note that you must first add the tag, refresh the page, and then add a bookmark to the main screen.

+9
Mar 18 '13 at 22:43
source share

It opens only the first (bookmark) page in full screen mode. Any next page will open With a new address bar. Whatever meta tag you put in your page title ...

+6
Mar 23 2018-11-23T00:
source share

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

+1
Jun 28 '11 at 7:15
source share


More articles:


All Articles