WebKit on iOS, and indeed on other platforms such as Android, has some custom meta tags to alter its behavior for mobile apps. This guide will give you an overview of the main tags, but see Apple's documentation for the full details, or Mathias Bynens' excellent guide.

Viewport

By default, Mobile Safari assumes a page has been designed for the desktop, and will scale the viewport accordingly. This lets users double tap, or pinch to zoom the page, useful for most websites, but for not applications. We want our application to display as-is, without any scaling or zooming. To do this, is just a matter of including the following meta tag in the page's head:

<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1; maximum-scale=1.0; user-scalable=0;"/>

This disables the zooming, and locks the scale at 1.0. For more information, see the Apple Developer guide.

Making an application

Mobile Safari gives you the ability to turn a site into what's looks like a native app, which launches without any browser chrome.

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

Enabling it gives you the following option in Safari.

Add to home screen

Specifying an icon

To specify an icon for the application, you can use the link tag apple-touch-icon. It should point to an image sized 57 x 57 px.

<link rel="apple-touch-icon" href="images/icons/appicon.png">

Otherwise, iOS will just use a screenshot of the application.

Icon

The alternative is to use the apple-touch-icon-precomposed link tag which will stop iOS adding any effects to the icon.

You should also provide a high resolution version of your icon for Retina displays. This should be double the size (114 × 114)

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icons/appicon-x2.png">

Specifying a startup image

To specify a startup image for the application, use the link tag apple-touch-startup-image.

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

This is highly recommended, as otherwise your users just get to stare at a blank screen for a couple of seconds. One approach to this, is using a slightly transparent png, which will display the application's interface, but be obvious to the user that it's temporarily disabled.

Changing the Status Bar Appearance

You can set the appearence of the status bar in your application, to fit with your design, by using the apple-mobile-web-app-status-bar-style meta tag.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Status bar

The supported values for this are: