iOS Web App Configuration

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 Options -->

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

<!-- Banner for iOS app if user is on supported device -->
<meta name="apple-itunes-app" content="app-id=xxxxxxxxx">


<!-- Browser Appearance -->

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

<!-- hides address bar & search -->
<meta name="apple-mobile-web-app-capable" content="yes">


<!-- Home Screen Icons -->

<!-- For third generation iPad Retina Display -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/images/icons/touch/apple-touch-icon-144x144-precomposed.png">

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/images/icons/touch/apple-touch-icon-114x114-precomposed.png">

<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/images/icons/touch/apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/assets/images/icons/touch/apple-touch-icon-57x57-precomposed.png">

<!-- For nokia devices: -->
<link rel="shortcut icon" href="/assets/images/icons/touch/apple-touch-icon.png">


<!-- STARTUP IMAGES -->

<!-- startup image for web apps - iPad - landscape (748x1024) 
     Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<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)" />

<!-- 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 iPad (Retina, portrait)-->
<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">

<!-- startup image for iPad (Retina, landscape)-->
<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">

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