iOS web programming

Web Inspector

On Mac

Safari -> Preferences -> Advanced -> Show Develop in menu bar

On iPhone

Settings -> Safari -> Advanced -> Web Inspector

Application Name


Launcher icon (iOS 1.1.3+)

Rounded corners, no added shiny (iOS 4.2):

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"/>

Added shiny:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

With no sizes the default is 57x57 px
(Multiple sizes iOS 4.2+)

Startup Image (iOS 3.0+)

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

320x460 px, portrait

Have standalone look

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

You might think it’s an innocent meta tag, but in fact it’s a powerful and dangerous meta tag if you add it irresponsibly. You must provide a single page application solution offering back buttons inside the UI -or use location.href instead of normal <a> links if you don’t want them to be opened in the browser instead of your app’s container-.

That will involve: a) adding back navigation everywhere, b) create a SPA experience or use location.href instead of <a> links for internal navigation, c) if the load process is done in fullscreen mode (navigator.standalone==true), always load the home screen not matter what the stored URL says and please d) don’t suggest me to “download an app” if I’m already inside an app-like experience.

Hide top status bar

NB - must have standalone mode on.

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

Prevent zooming

<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="maximum-scale=1.0">
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="width=device-width">