title: iOS PWA splash screen?
body: <p>In terms of PWA splash screens, do people think the code at <a href="https://pwa-splash.now.sh/" rel="noreferrer">https://pwa-splash.now.sh/</a> and <a href="https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210" rel="noreferrer">https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210</a> </p>
  
  <p>is the most up-to-date and device compatible way of doing it? Or have people found issues with it and have modifications?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;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)"&gt;
  &lt;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)"&gt;
  &lt;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)"&gt;
  &lt;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)"&gt;
  &lt;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)"&gt;
  &lt;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)"&gt;
  &lt;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)"&gt;
  </code></pre>
  
  <p><strong>Update 1:</strong></p>
  
  <p>In response to the answer by Robinyo below, taking the first example above:</p>
  
  <pre><code>&lt;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)"&gt;
  </code></pre>
  
  <p>The following line would need to be added for landscape yes?</p>
  
  <pre><code>&lt;link rel="apple-touch-startup-image" href="images/splash/launch-**1136x640**.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: **landscape**)"&gt;
  </code></pre>
  
  <p>Perhaps I’m wrong but I’m actually not sure whether iOS PWA will handle it. The reason is because I read that on creation (Add to home screen), iOS selects one png and stores it locally. So the next time the PWA app is opened it uses that one local image before trying to connect to the web. So the question I’m wondering about is whether iOS will store two images locally, one for portrait and one for landscape.</p>