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 应用程序时，它会在尝试连接到网络之前使用该本地镜像。所以我想知道的问题是iOS是否会在本地存储两张图片，一张是肖像，一张是风景。

Answer 1

对于那些仍然对此感到疑惑的人，我创建了一个 free tool that generates iOS splash screens各种尺寸(截至 2022 年 4 月共有 26 种尺寸)以及所有必要的元标记(纵向和横向)。

目前，它支持所有屏幕尺寸，一直到最新的 iPhone 13 Pro Max。在 Browserstack 上可用的每一部 iPhone 和 iPad 上进行了测试。

此线程中提到的 appsco.pe 链接不提供最新设备的启动画面，并且它也缺少横向版本。

该工具本身是免费使用的，但它共享我用于商业产品的相同代码，因此根据设计，它应该始终是最新的。