12th September, 2012

Full Screen Home Page HTML5 App

Making your HTML5 web site available on the iPhone Home Screen with a lovely icon is as simple as adding:

<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" />

to your HTML.

If it's a 'web app' you can remove the browser 'chrome' with

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

For really using up all the screen space, set the status bar to black:

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



The opinions expressed here are my own and not those of my employer.