-
-
Save walterrenner/4174910 to your computer and use it in GitHub Desktop.
iOS web app - icons, startup images, install hints
This file contains 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> | |
| <meta charset="utf-8"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- values: default, black, black-translucent --> | |
| <meta name="viewport" content="initial-scale=1.0"> | |
| <meta name="viewport" content="maximum-scale=1.0"> | |
| <meta name="viewport" content="user-scalable=no"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>iOS Web App</title> | |
| <link rel="shortcut icon" href="/images/favicon.ico" /> | |
| <!-- Touch Icon, one size for all (google like) --> | |
| <!-- iPhone iPhone (Retina) iPad iPad (Retina) --> | |
| <!-- 57×57 114×114 72×72 144×144 --> | |
| <link sizes="144x144" rel="apple-touch-icon" href="/images/apple-touch-icon-144x144.png" /> | |
| <link sizes="144x144" rel="apple-touch-icon-precomposed" href="imgages/apple-touch-icon-144x144-precomposed.png" /> | |
| <!-- Startup Images --> | |
| <!-- iPhone --> | |
| <link href="/images/apple-touch-startup-image-320x460.png" | |
| media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone (Retina) --> | |
| <link href="/images/apple-touch-startup-image-640x920.png" | |
| media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 5 --> | |
| <link href="http://taylor.fausak.me/static/images/apple-touch-startup-image-640x1096.png" | |
| media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPad --> | |
| <link href="/images/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"> | |
| <link href="/images/apple-touch-startup-image-748x1024.png" | |
| media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPad (Retina) --> | |
| <link href="/images/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"> | |
| <link href="/images/apple-touch-startup-image-1496x2048.png" | |
| media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- CSS for Install Hints --> | |
| <style type="text/css"> | |
| .triangle-border { | |
| padding:15px; | |
| margin:1em 0 3em; | |
| border:5px solid blue; | |
| color:#333; | |
| background:#fff; | |
| -webkit-border-radius:10px; | |
| -moz-border-radius:10px; | |
| border-radius:10px; | |
| } | |
| .triangle-border:before { | |
| content:""; | |
| position:absolute; | |
| bottom:-20px; | |
| left:125px; | |
| border-width:20px 20px 0; | |
| border-style: solid; | |
| border-color:blue transparent; | |
| display:block; | |
| width:0; | |
| } | |
| .triangle-border:after { | |
| content:""; | |
| position:absolute; | |
| bottom:-13px; | |
| left:132px; | |
| border-width:13px 13px 0; | |
| border-style:solid; | |
| border-color:#fff transparent; | |
| display:block; | |
| width:0; | |
| } | |
| .triangle-border.top:before { | |
| top:-20px; | |
| bottom:auto; | |
| left:auto; | |
| left:40px; | |
| border-width:0 20px 20px; | |
| } | |
| .triangle-border.top:after { | |
| top:-13px; | |
| bottom:auto; | |
| left:auto; | |
| left:47px; | |
| border-width:0 13px 13px; | |
| } | |
| .iPad { | |
| position:fixed; | |
| top: 0; | |
| left: 140px; | |
| } | |
| .iPhone { | |
| position:fixed; | |
| bottom: 5px; | |
| margin: 10px auto; | |
| max-width: 265px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div style="display:none" class="triangle-border top iPad" id="install_hint_ipad">Install the Web App on your iPad, click here and "Add to Home Screen"</div> | |
| <div style="display:none;" class="triangle-border iPhone" id="install_hint_iphone">Install the Web App on your iPhone, click here and "Add to Home Screen"</div> | |
| <div class="container"> | |
| <h2>iOS Web App</h2> | |
| </div> | |
| <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> | |
| <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> | |
| <script type="text/javascript"> | |
| window.onload = init; | |
| var iPad = ( navigator.userAgent.match(/iPad/i) ? true : false ); | |
| var iPhone = ( navigator.userAgent.match(/(iPhone|iPod)/i) ? true : false ); | |
| if (("standalone" in window.navigator) && !window.navigator.standalone) { | |
| if (iPad) { | |
| document.getElementById('install_hint_ipad').style.display="block"; | |
| } else{ | |
| document.getElementById('install_hint_iphone').style.display="block"; | |
| }; | |
| } | |
| function init() { | |
| // little hack to hide url-bar on iPhones | |
| window.scrollTo(0, 1); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment