Setting Page As An iOS Web App

You can setup a few meta tags to tell iOS that your site can be added to the Home Screen as a web app. Once launched from there, all of the Safari elements are hidden.


<!-- DON'T LET USER ADJUST SIZE -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- TELL iOS THIS CAN BE SHOWN AS A WEB APP -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Creating A Startup Image

The startup screen needs to be 320x460px in portrait orientation and should be in PNG or JPG format.


<link rel="apple-touch-startup-image" href="/my_ios_startup_screen.png">

Apple Resources

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/configuringwebapplications/configuringwebapplications.html

Screen Size

When you are in web app mode the screen size is 320x460px. When you are in web browser mode the screen size is 320x356px.

USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.

Comments

Your email address will not be published.