Last active
September 2, 2024 04:08
-
-
Save tfausak/2222823 to your computer and use it in GitHub Desktop.
iOS 8 web app http://taylor.fausak.me/2015/01/27/ios-8-web-apps/
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> | |
| <!-- http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ --> | |
| <html> | |
| <head> | |
| <title>iOS 8 web app</title> | |
| <!-- CONFIGURATION --> | |
| <!-- Allow web app to be run in full-screen mode. --> | |
| <meta name="apple-mobile-web-app-capable" | |
| content="yes"> | |
| <!-- Make the app title different than the page title. --> | |
| <meta name="apple-mobile-web-app-title" | |
| content="iOS 8 web app"> | |
| <!-- Configure the status bar. --> | |
| <meta name="apple-mobile-web-app-status-bar-style" | |
| content="black"> | |
| <!-- Set the viewport. --> | |
| <meta name="viewport" | |
| content="initial-scale=1"> | |
| <!-- Disable automatic phone number detection. --> | |
| <meta name="format-detection" | |
| content="telephone=no"> | |
| <!-- ICONS --> | |
| <!-- iPad retina icon --> | |
| <link href="https://placehold.it/152" | |
| sizes="152x152" | |
| rel="apple-touch-icon-precomposed"> | |
| <!-- iPad retina icon (iOS < 7) --> | |
| <link href="https://placehold.it/144" | |
| sizes="144x144" | |
| rel="apple-touch-icon-precomposed"> | |
| <!-- iPad non-retina icon --> | |
| <link href="https://placehold.it/76" | |
| sizes="76x76" | |
| rel="apple-touch-icon-precomposed"> | |
| <!-- iPad non-retina icon (iOS < 7) --> | |
| <link href="https://placehold.it/72" | |
| sizes="72x72" | |
| rel="apple-touch-icon-precomposed"> | |
| <!-- iPhone 6 Plus icon --> | |
| <link href="https://placehold.it/180" | |
| sizes="120x120" | |
| rel="apple-touch-icon-precomposed"> | |
| <!-- iPhone retina icon (iOS < 7) --> | |
| <link href="https://placehold.it/114" | |
| sizes="114x114" | |
| rel="apple-touch-icon-precomposed"> | |
| <!-- iPhone non-retina icon (iOS < 7) --> | |
| <link href="https://placehold.it/57" | |
| sizes="57x57" | |
| rel="apple-touch-icon-precomposed"> | |
| <!-- STARTUP IMAGES --> | |
| <!-- iPad retina portrait startup image --> | |
| <link href="https://placehold.it/1536x2008" | |
| media="(device-width: 768px) and (device-height: 1024px) | |
| and (-webkit-device-pixel-ratio: 2) | |
| and (orientation: portrait)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPad retina landscape startup image --> | |
| <link href="https://placehold.it/1496x2048" | |
| media="(device-width: 768px) and (device-height: 1024px) | |
| and (-webkit-device-pixel-ratio: 2) | |
| and (orientation: landscape)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPad non-retina portrait startup image --> | |
| <link href="https://placehold.it/768x1004" | |
| media="(device-width: 768px) and (device-height: 1024px) | |
| and (-webkit-device-pixel-ratio: 1) | |
| and (orientation: portrait)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPad non-retina landscape startup image --> | |
| <link href="https://placehold.it/748x1024" | |
| media="(device-width: 768px) and (device-height: 1024px) | |
| and (-webkit-device-pixel-ratio: 1) | |
| and (orientation: landscape)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 6 Plus portrait startup image --> | |
| <link href="https://placehold.it/1242x2148" | |
| media="(device-width: 414px) and (device-height: 736px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: portrait)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 6 Plus landscape startup image --> | |
| <link href="https://placehold.it/1182x2208" | |
| media="(device-width: 414px) and (device-height: 736px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: landscape)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 6 startup image --> | |
| <link href="https://placehold.it/750x1294" | |
| media="(device-width: 375px) and (device-height: 667px) | |
| and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone 5 startup image --> | |
| <link href="https://placehold.it/640x1096" | |
| media="(device-width: 320px) and (device-height: 568px) | |
| and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone < 5 retina startup image --> | |
| <link href="https://placehold.it/640x920" | |
| media="(device-width: 320px) and (device-height: 480px) | |
| and (-webkit-device-pixel-ratio: 2)" | |
| rel="apple-touch-startup-image"> | |
| <!-- iPhone < 5 non-retina startup image --> | |
| <link href="https://placehold.it/320x460" | |
| media="(device-width: 320px) and (device-height: 480px) | |
| and (-webkit-device-pixel-ratio: 1)" | |
| rel="apple-touch-startup-image"> | |
| <!-- HACKS --> | |
| <!-- Prevent text size change on orientation change. --> | |
| <style> | |
| html { | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>iOS 8 web app</h1> | |
| </body> | |
| </html> |
in iOS 9, startup images are borked :(
This is amazing, thanks a lot! I was wondering if you could link to other pages in the web app, without it going into Safari (or your default browser)?
Thanks :)
Is this not working for anyone else in iOS10?
iOS 10? :(
Still not working in iOS10. What a shame Apple!
Can confirm this does not work on iPad 2 + iOS 9.3.5
Still busted as of iOS 11 in 2018 :/
found a working solution here: https://appsco.pe/developer/splash-screens & https://dev.to/oskarlarsson/designing-native-like-progressive-web-apps-for-ios-510o
This lib can be handy: https://github.com/onderceylan/pwa-asset-generator
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks a lot!