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 : 320x460iPhone 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">