1

After reading:

Multiple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?

In that post's comments, Marconi's 'definitive' solution uses:

apple-touch-startup-image-2048x1496.png in:

<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

whereas https://medium.com/appscope/adding-custom-ios-splash-screens-to-your-progressive-web-app-41a9b18bdca3

uses:

apple-launch-1536x2048.png in:

<!-- iPad Mini, Air (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-1536x2048.png">

(a 40px difference)

Further, the medium article says the png has to be the "exact same resolution as the iOS device that uses the app". And the article also doesn't mention portrait/landscape orientation? Is that media query now redundant?

Can anyone share a tested 2018 solution that includes portrait/landscape orientation and all iPhones and iPads?

user1946932
  • 474
  • 1
  • 16
  • 41
  • Please [edit](http://stackoverflow.com/posts/43463046/edit) the question to be on-topic: include a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) that duplicates the problem. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it in the question itself. Please also see: [What topics can I ask about here?](http://stackoverflow.com/help/on-topic), and [How to Ask](http://stackoverflow.com/help/how-to-ask) – Mr.Rebot Nov 20 '18 at 06:44

0 Answers0