就 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是否会在本地存储两张图片,一张是肖像,一张是风景。
最佳答案
对于那些仍然对此感到疑惑的人,我创建了一个 free tool that generates iOS splash screens各种尺寸(截至 2022 年 4 月共有 26 种尺寸)以及所有必要的元标记(纵向和横向)。
目前,它支持所有屏幕尺寸,一直到最新的 iPhone 13 Pro Max。在 Browserstack 上可用的每一部 iPhone 和 iPad 上进行了测试。
此线程中提到的 appsco.pe 链接不提供最新设备的启动画面,并且它也缺少横向版本。
该工具本身是免费使用的,但它共享我用于商业产品的相同代码,因此根据设计,它应该始终是最新的。
关于iOS PWA 闪屏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55840186/