iPhone dev notes

Make your site fit in the iPhone screen (Meta tag in <head> section)

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

Disable font-size adjustments when in landscape mode (Css attribute)

* { -webkit-text-size-adjust: none; }

Serving iPhone specific CSS

HTML

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

CSS

@media only screen and (max-device-width: 480px) { ... }

To remove the URL and button bars

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

Status bar styles (default, black, translucent)

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

To prevent the web app to partially scroll out of the screen when dragged, add this code:

<script>
   function noDrag(event) {
      event.preventDefault();
   }
</script>
<body ontouchmove="noDrag(event);" >

App icon with glossy finish

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

App icon unmodified

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

App icon unmodified for standard and retina

<llink rel="apple-touch-icon-precomposed" sizes="114x114" href="image1.png"> <llink rel="apple-touch-icon-precomposed" sizes="72x72" href="image2.png">

App splash screen in png format

iPhone : 320x460
iPhone retina : 640 x 960
iPad : 1004x768
iPad retina : 1536 x 2008
<link rel="apple-touch-startup-image" href="./startup.png" />

Some web app-related tags

<link rel="top" title="app name" href="/"> <meta name="application-name" content="app name"> <meta name="application-url" content="/">

Highlight color when tapping

<style>*{-webkit-tap-highlight-color:rgba(255,255,0,0);}</style>

More control in input fields

<input type="search" autocapitalize="off" autocorrect="off">