PWA 在 IOS 中不显示初始屏幕



在IOS设备上使用时,我在PWA上显示启动屏幕时遇到问题。

当我为启动屏幕在代码中添加多个标签时,就会出现问题。

例如:

如果我把下面的行,它工作得很好:

< link rel = "apple-touch-startup-image" sizes="1125x2436" href = "/ asset / img / splashscreens / apple_splash_1125.png">

但如果我放两行,它不起作用:

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

如果你能帮我,我将不胜感激。

我找到了解决方案,它是删除size="1125x2436"并添加media="(设备宽度:375px(和(设备高度: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">

最新更新