PWA不显示带有IOS的启动屏幕

时间:2018-12-14 14:04:24

标签: ios splash-screen progressive-web-apps

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

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

1 个答案:

答案 0 :(得分:0)

我找到了解决方案,它是删除尺寸=“ 1125x2436”并添加媒体=“(设备宽度: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">