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> |
So @addyosmani you are using the gist above?
You are amazing. Thank you!
Thanks a lot! Just what I was looking for.
Can anyone verify if this is still an issue in 9.3?
Thanks, this was very helpful!
Seems like startup images still aren't working on iOS 9.3. Just finished putting some together in Photoshop and then I found this thread. Hopefully this is resolved.
@plainspace do you have them working on iOS 9x?
Thanks a lot!
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
Verified that startup images (
apple-touch-startup-image) do appear to still be busted on iOS9 with iPhone 5, 6, 6 Plus, iPad 2. Ugh. https://forums.developer.apple.com/thread/23924 mentions that this hasn't been fixed in iOS 9.2. Haven't found any official responses from Apple on whether this was intentionally removed or this is just a regression.For now, I'm going to keep including the tags/custom graphics in my apps until either a fix or note from them gets published.