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.

Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *