PWA не показывает заставку с IOS

Question

У меня проблемы с отображением заставки на PWA при использовании на устройстве IOS.

Проблема возникает, когда я добавляю в код более одной метки для заставки.

Например:

Если я поставлю следующую строку, она будет работать нормально:

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

Я быпризнателен, если бы вы могли мне помочь.

Answer 1

Я нашел решение, это было убрать size = "1125x2436" и добавить media = "(device-width: 375px) и (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">