заставка iOS PWA? - PullRequest
       22

заставка iOS PWA?

0 голосов
/ 25 апреля 2019

С точки зрения заставок 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:

В ответ наОтвет Робиньо ниже, взяв первый пример выше:

<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 хранить два изображения локально, одно для портрета и одно для ландшафта.

Ответы [ 2 ]

1 голос
/ 25 апреля 2019

Взгляните на: Советы и рекомендации PWA

Портрет:

enter image description here

Пейзаж:

enter image description here

0 голосов
/ 30 апреля 2019

По состоянию на 30 апреля 2019 года https://gist.github.com/EvanBacon/7fd4dc3be3d00096579bb0b134c56ec7 работал (тестировался на iPad Pro 11 дюймов, iPhone XS Max), включая книжную и альбомную ориентацию.

...