PWA 不显示 IOS 启动画面
Posted
技术标签:
【中文标题】PWA 不显示 IOS 启动画面【英文标题】：PWA doesn't show splash screen with IOS 【发布时间】：2018-12-14 14:04:23 【问题描述】：在 ios 设备上使用时，我无法在 PWA 上显示启动画面。
当我在代码中为启动画面输入多个标签时，就会出现问题。
例如：
如果我输入以下行，它就可以正常工作：
< link rel = "apple-touch-startup-image" sizes="1125x2436" href = "/ asset / img / splashscreens / apple_splash_1125.png">
但是如果我放 2 行就不行了：
< link rel = "apple-touch-startup-image" sizes="1125x2436" href = "/ asset / img / splashscreens / apple_splash_1125.png">
< link rel = "apple-touch-startup-image" sizes="750x1334" href = "/ asset / img / splashscreens / apple_splash_750.png">
如果你能帮助我，我将不胜感激。
【问题讨论】：
【参考方案1】：我找到了解决办法，就是去掉 sizes = "1125x2436" 并添加 media = "(device-width: 375px) and (device-height: 812px)"
下面我举个例子：
<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px)" href="/assets/img/splashscreens/apple_splash_1125.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px)" href="/assets/img/splashscreens/apple_splash_750.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px)" href="/assets/img/splashscreens/apple_splash_1242.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px)" href="/assets/img/splashscreens/apple_splash_640.png">
【讨论】：
以上是关于PWA 不显示 IOS 启动画面的主要内容，如果未能解决你的问题，请参考以下文章
如何创建第二个启动画面（在 ios 中的默认启动画面之后）？