Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
@tfausak
Copy link
Author

tfausak commented Jun 19, 2015

@vergissberlin: I updated this to use placeholder images. Thanks for the suggestion!

@barneycarroll: As far as I know, you can't avoid that. There will probably always be a brief flash of white between the startup image and your site.

@paicolman: This should work over HTTPS. Make sure that your images are being served over HTTPS.

@ericholmer
Copy link

ericholmer commented Jul 20, 2015

First, thanks @tfausak for sharing this awesome tool.

Agree with @csmcgee and selanac82 however - can get the icons to load up fine but the startup image will not load on my iPad Air 2. It works for my iPhone 6 however. Any advice?

@x4080
Copy link

x4080 commented Aug 16, 2015

Ipad 3 startup image not showing also in ios 8 in landscape mode, works ok on portrait mode, maybe there's a bug in ios 8? IOS 7 works ok before

edit: it is showing is image is save in portrait version, so in landscape mode, the image still in portrait mode, resolution is 1496x2048 and not 2048x1496

@mtozlu
Copy link

mtozlu commented Sep 11, 2015

Hi, thanks for great gist. As the mobile environment is constantly changing; i suppose this functionality will have changes by time too. If you plan to keep this updated, would you mind creating a bower package so we can practically follow the updates?

Thanks.

@mike-zarandona
Copy link

mike-zarandona commented Sep 25, 2015

This is incredible, thank you so much. It appears as if iOS 9 may have broken web app capable startup screens - anyone else having the same issues?

@ThatGuySamUK
Copy link

ThatGuySamUK commented Oct 5, 2015

@mike-zarandona I'm having the same issue too! Hopefully we can get an updated gist?

Copy link

ghost commented Oct 22, 2015

@tfausak @mike-zarandona - Has anyone figured out how to fix the iOS 9 not showing web app capable startup screens? I have tested thoroughly and this is an issue?

@tfausak
Copy link
Author

tfausak commented Oct 25, 2015

@mike-zarandona, @ThatGuySamUK, and @CodedInk: I think (at least) startup images are broken in iOS 9. Safari still makes requests for the images, but I cannot figure out how to make it display them. Other people have found this bug, as noted in this Stack Overflow question.

@bluntspoon
Copy link

bluntspoon commented Nov 23, 2015

"As far as I can tell iPad must be in portrait and not landscape when the homescreen app is saved in Safari otherwise iPad ignores the startup images. This is on iOS 8."

Is this still true for iOS8, my tests say "Yes".

@addyosmani
Copy link

addyosmani commented Dec 24, 2015

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.

@plainspace
Copy link

plainspace commented Dec 30, 2015

So @addyosmani you are using the gist above?

@j26design
Copy link

j26design commented Jan 30, 2016

You are amazing. Thank you!

@vernondegoede
Copy link

vernondegoede commented Feb 29, 2016

Thanks a lot! Just what I was looking for.

@addyosmani
Copy link

addyosmani commented Mar 22, 2016

Can anyone verify if this is still an issue in 9.3?

@escherwd
Copy link

escherwd commented Mar 26, 2016

Thanks, this was very helpful!

@Gerwinnz
Copy link

Gerwinnz commented Apr 1, 2016

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.

@Gerwinnz
Copy link

Gerwinnz commented Apr 1, 2016

@plainspace do you have them working on iOS 9x?

@edouard-claude
Copy link

edouard-claude commented Apr 30, 2016

Thanks a lot!

@dungsaga
Copy link

dungsaga commented Jun 17, 2016

in iOS 9, startup images are borked :(

@cybnz
Copy link

cybnz commented Aug 16, 2016

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)?

@bdthemes
Copy link

bdthemes commented Sep 28, 2016

Thanks :)

@omardlhz
Copy link

omardlhz commented Nov 15, 2016

Is this not working for anyone else in iOS10?

@aimore
Copy link

aimore commented Dec 18, 2016

iOS 10? :(

@ThisIsQasim
Copy link

ThisIsQasim commented Jul 3, 2017

Still not working in iOS10. What a shame Apple!

@floriansegginger
Copy link

floriansegginger commented Jul 21, 2017

Can confirm this does not work on iPad 2 + iOS 9.3.5

@dsgriffin
Copy link

dsgriffin commented Jan 31, 2018

Still busted as of iOS 11 in 2018 :/

@onderceylan
Copy link

onderceylan commented Dec 30, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment