Skip to content

Instantly share code, notes, and snippets.

@DaveHudson
Last active January 19, 2021 08:50
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save DaveHudson/fc47c0e04aec69f5fa83fa01ae0b9810 to your computer and use it in GitHub Desktop.
Save DaveHudson/fc47c0e04aec69f5fa83fa01ae0b9810 to your computer and use it in GitHub Desktop.
PWA apple-touch-startup-image iOS
<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
@willstocks
Copy link

willstocks commented Nov 27, 2018

This has helped me a lot - thanks @DaveHudson!!

Out of curiosity, do you cater for "landscape" in the same manner? Simply:

<link rel="apple-touch-startup-image" href="images/splash/portrait/launch-*width*x*height*.png" media="(device-width: ###px) and (device-height: ###px) and (-webkit-device-pixel-ratio: #) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/landscape/launch-*height*x*width*.png" media="(device-width: ###px) and (device-height: ###px) and (-webkit-device-pixel-ratio: #) and (orientation: landscape)">

@flynorc
Copy link

flynorc commented Jan 15, 2019

i'm confused, why are you using (device-width: XXXpx) and (device-height: YYYpx) for the phones

and then
(min-device-width: XXXpx) and (max-device-width: XXXpx)
for tablets?

also should line 5 not supposed to have min and max width set to 768?

thank you for your clarification

@lucaslealdev
Copy link

Is this supposed to work with iPhone 6S ios9? Cause it is not :(

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