-
-
Save henrypoydar/338ac838516b4951aadf to your computer and use it in GitHub Desktop.
iOS 8 Web App
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <!-- Run in full-screen mode. --> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <!-- Make the status bar black with white text. --> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | |
| <!-- Customize home screen title. --> | |
| <meta name="apple-mobile-web-app-title" content="Web App"> | |
| <!-- Disable phone number detection. --> | |
| <meta name="format-detection" content="telephone=no"> | |
| <!-- Set viewport. --> | |
| <meta name='viewport' content='width=device-width, initial-scale=1, minimal-ui=1, maximum-scale=1'> | |
| <title>iOS 8 Web App</title> | |
| <!-- Icons --> | |
| <link href="/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon"> | |
| <link href="/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon"> | |
| <link href="/apple-touch-icon-76x76.png" sizes="76x76" rel="apple-touch-icon"> | |
| <link href="/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon"> | |
| <link href="/apple-touch-icon-120x120.png" sizes="120x120" rel="apple-touch-icon"> | |
| <link href="/apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon"> | |
| <link href="/apple-touch-icon-152x152.png" sizes="152x152" rel="apple-touch-icon"> | |
| <link href="/apple-touch-icon-180x180.png" sizes="180x180" rel="apple-touch-icon"> | |
| <!-- Startup screens --> | |
| <!-- iPhones to subtract 20px*(pixel ratio) from height in portrait only --> | |
| <!-- iPads need to subtract 20px*(pixel ratio) from height in both portrait and landscape --> | |
| <!-- iPhone, iPod Touch, portrait --> | |
| <link href="/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> | |
| <!-- iPhone, iPod Touch, landscape --> | |
| <link href="/apple-touch-startup-image-480x320.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> | |
| <!-- iPhone 4, 4S, portrait --> | |
| <link href="/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> | |
| <!-- iPhone 4, 4S, landscape --> | |
| <link href="/apple-touch-startup-image-960x640.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> | |
| <!-- iPhone 5, 5S, 5C, portrait --> | |
| <link href="/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> | |
| <!-- iPhone 5, 5S, 5C, landscape --> | |
| <link href="/apple-touch-startup-image-1136x640.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> | |
| <!-- iPhone 6, portrait --> | |
| <link href="/apple-touch-startup-image-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> | |
| <!-- iPhone 6, landscape --> | |
| <link href="/apple-touch-startup-image-1334x750.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> | |
| <!-- iPhone 6+, portrait --> | |
| <link href="/apple-touch-startup-image-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"> | |
| <!-- iPhone 6+, landscape --> | |
| <link href="/apple-touch-startup-image-2208x1242.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"> | |
| <!-- iPad 1, 2, Mini, portrait --> | |
| <link href="/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> | |
| <!-- iPad 1, 2, Mini, landscape --> | |
| <link href="/apple-touch-startup-image-1024x748.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> | |
| <!-- iPad 3, 4, Air, Air 2, Mini 2, Mini 3, portrait --> | |
| <link href="/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> | |
| <!-- iPad 3, 4, Air, Air 2, Mini 2, Mini 3, landscape --> | |
| <link href="/apple-touch-startup-image-2048x1496.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> | |
| </head> | |
| <body> | |
| <h1>iOS 8 Web app</h1> | |
| <p>Add this page to your home screen or <a href="https://gist.github.com/338ac838516b4951aadf">view its source</a>. | |
| </body> | |
| </html> |
Hello thanx for the code,
Do you know why online generators create for example an image of 320x480 when your example is 320x460 ?
@manelephant - The 20px difference is to compensate for the status bar
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sweet! It would be great if this would work for Android as well. I don't have an android through so I don't know...