iOS home screen voodoo

2011-02-11

Some iOS meta tags for web apps. Most notably, there's one meta tag that allows you to set a loading image for when you are loading a web app that's added to your home screen. I found that it's notoriously difficult to google for it. So I hope this article helps you with that.

Code: (html)
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="/apple-touch-startup-image.png.png" rel="apple-touch-startup-image" />
<link rel="apple-touch-icon" href="/media/icon.png" />
<meta name="viewport" content="width=device-width,initial-scale=1; maximum-scale=1; user-scalable=no;" />

Btw, to check whether your app is currently running as home screen app, check the window.navigator.standalone state.

Here are some related CSS properties:

Code:
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */