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.