Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save liorocks/3845106 to your computer and use it in GitHub Desktop.
Save liorocks/3845106 to your computer and use it in GitHub Desktop.
iPhone Web Application Development Tips
body {
-webkit-text-size-adjust: none;
}
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 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" />
<!-- 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">
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="iphone-retina.css">
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="iphone-retina.css">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment