iPhone Web Application Development Tips

Disable Font Size Changing on Landscape Mode.css

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

Disable Scaling and Zooming.html

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

Full Screen Mode.html

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

iPhone App Icon.html

<!-- 57x57 -->
<link rel="apple-touch-icon" href="icon.png" />
<!-- Add "-precomposed" to remove rounded corners and glossy overlay --->
<link rel="apple-touch-icon-precomposed" href="icon.png" />

Start up Splash Screen.html

<!-- startup image for web apps (320x460) for iphone and iphone 4s -->
<link rel="apple-touch-startup-image" href="img/320x460.png" media="screen and (max-device-width: 320px)" />
<link rel="apple-touch-startup-image" href="img/320x460-landscape.png" media="screen and (max-device-width: 320px) and (orientation:landscape)" />

<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- startup image for web apps - iPad - landscape (748x1024) -->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />


<!-- More Detailed and Pixel Perfect -->

<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-1496x2048.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

Target iPhone 4s Retina Display CSS (iPad new iPod).html

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="iphone-retina.css">

Target iPhone 4s Retina Display CSS (iPad, new iPod).html

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="iphone-retina.css">