mobile-meta-links.html

<!-- Mobile meta & links -->

<!-- Reference

Custom Icon and Image Creation Guidelines:
http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html

Configuring Web Applications:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/configuringwebapplications/configuringwebapplications.html

Configuring the Viewport:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

Optimizing Web Content:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html

-->

<!-- VIEWPORT -->

<!-- optimized for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- optimized for mobile, zoom/scaling disabled -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />


<!-- BROWSER CHROME -->

<!-- status bar styles: default, black, or black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />	

<!-- hides browser chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />


<!-- HOME SCREEN ICONS -->

<!-- home screen icon -->
<link rel="apple-touch-icon" href="/customIcon.png" />

<!-- home screen icon - ipad -->
<link rel="apple-touch-icon" href="/customIcon.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<!-- or -->
<link rel="apple-touch-icon" sizes="72x72" href="/customIcon.png" />

<!-- home screen icon - high res -->
<link rel="apple-touch-icon" href="/customIcon.png" media="screen and (-webkit-min-device-pixel-ratio: 2)" />
<!-- or -->
<link rel="apple-touch-icon" sizes="114x114" href="/customIcon.png" />

<!-- home screen icon, omits iOS embellishments, works in Android -->
<link rel="apple-touch-icon-precomposed" href="/customIcon.png" /> 

<!-- home screen icon, omits iOS embellishments - ipad -->
<link rel="apple-touch-icon-precomposed" href="/customIcon.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<!-- or -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/customIcon.png" /> 

<!-- home screen icon, omits iOS embellishments - high res -->
<link rel="apple-touch-icon-precomposed" href="/customIcon.png" media="screen and (-webkit-min-device-pixel-ratio: 2)" /> 
<!-- or -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/customIcon.png" /> 


<!-- STARTUP IMAGES -->

<!-- startup image for web apps (320x480) -->
<link rel="apple-touch-startup-image" href="/customIcon.png" />

<!-- startup image for web apps - high res (640x940) -->
<link rel="apple-touch-startup-image" href="/customIcon.png" media="screen and (-webkit-min-device-pixel-ratio: 2)" />
<!-- or -->
<link rel="apple-touch-startup-image" sizes="640x940" href="/customIcon.png" />

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

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