-
-
Save marijn/3895687 to your computer and use it in GitHub Desktop.
iOS Web App Configuration
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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 - 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 web apps (320x460) --> | |
| <link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment