iOS PWA启动画面？

Question

就PWA初始屏幕而言，人们是否认为https://pwa-splash.now.sh/和https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210处的代码

是最新的且与设备兼容的方法吗？还是有人发现了问题并进行了修改？

代码如下：

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

更新1：

以下面的第一个示例为回应，下面是Robinyo的回答：

<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-**1136x640**.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: **landscape**)">

也许我错了，但实际上我不确定iOS PWA是否会处理它。原因是因为我在创建时（添加到主屏幕）阅读了此内容，iOS选择了一个png并将其存储在本地。因此，下次打开PWA应用程序时，它将在尝试连接到Web之前使用该本地映像。因此，我想知道的问题是，iOS是否会在本地存储两张图像，一幅用于肖像，一幅用于风景。

Answer 1

看看：PWA Tips and Tricks

肖像：

风景：

Answer 2

截止到2019年4月30日，https://gist.github.com/EvanBacon/7fd4dc3be3d00096579bb0b134c56ec7工作（在11英寸iPad Pro，iPhone XS Max上进行了测试），包括纵向和横向。

Answer 3

要进行快速测试，请转到 ios-splash-screen-with-generate-link-tag 以生成启动画面以及自动生成的链接标签，

您的链接标签应该看起来像这样，带有 orientation，

<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-launch-1125x2436.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-750x1334.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-launch-1242x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-640x1136.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-1536x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-1668x2224.png">
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-2048x2732.png">

此外，请确保设置了这些标题标记，

  <link rel='apple-touch-icon' href='/pwa/512.png'> 
  <meta name="apple-touch-fullscreen" content="yes"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="your_title">

确保在上面的 href 属性中使用正确的路径！