Несколько решений "apple-touch-startup-image" для веб-приложения iOS (особенно для iPad)?

Я написал веб-приложение iOS на базе HTML5, и все, кажется, работают хорошо, но я пытаюсь отполировать его несколькими экранами запуска. IPhone/iPod touch работает хорошо с PNG 320x460, как показано ниже:

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />

Я нашел много документации, в которой говорится, что загрузочные образы для iPad должны, как и iPhone/iPod touch, иметь 20px, сбритые с высоты, чтобы разместить в строке состояния разрешение 768x1004 (портрет) или 1024x748 (пейзаж), Тем не менее, в моем тестировании (в настоящее время с iPad под управлением iOS 3.2.2) работает только разрешение 768x1004 (портретное) (но неверно - 20 пикселей слишком узкое - в ландшафтном режиме).

Я пробовал следующее (дикое предположение, основанное на функциональности ссылок apple-touch-icon), безрезультатно:

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />

Работает только изображение с разрешением 768x1004, если он содержит последний элемент link. Если изображение с разрешением 1024x748 является последним, вместо него отображается серый фон (но никогда не 768x1004). Таким образом, очевидно, что apple-touch-startup-image link не поддерживает атрибут sizes.

Поддерживается ли это в новых версиях iOS? Есть ли способ поддерживать несколько загрузочных изображений? Должен ли я создать загрузочный образ 1024x768? Если это так, будет уменьшено для iPhone/iPod touch? Или, должен ли я просто сдаться и не иметь загрузочный образ для iPad?

Ответ 1

окончательное решение для заставки и сенсорных иконок для iPad и iPhone (альбомная ориентация || портретная) и (сетчатки || нет):

        <!-- iPhone ICON -->
        <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
        <!-- iPad ICON-->
        <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
        <!-- iPhone (Retina) ICON-->
        <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
        <!-- iPad (Retina) ICON-->
        <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

        <!-- iPhone SPLASHSCREEN-->
        <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
        <!-- iPhone (Retina) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (portrait) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
        <!-- iPad (landscape) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, portrait) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, landscape) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPhone 6/7/8 -->
        <link href="/images/favicon/750x1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
        <!-- iPhone 6 Plus/7 Plus/8 Plus -->
        <link href="/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

Ответ 2

Я действительно получил его для работы в ландшафтном режиме. Я получил информацию здесь: https://gist.github.com/472519.

Проблема заключается в том, что альбомное изображение должно быть 748x1024 (горизонтальное изображение сбоку, я повернута по часовой стрелке) вместо 1024x748.

Мне также пришлось сначала запустить приложение в портретном режиме, а затем в альбомном режиме.

Ответ 3

Я просто хотел предложить комбинацию ответов, которые действительно работали. Мы обнаружили, что с выбранным ответом, версии сетчатки изображений брызг не использовались. Павел ответил, исправил версию сетчатки для iPad. Следующее было протестировано на iPhone (сетчатка и не сетчатка) и iPad (сетчатка и не сетчатка).

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (non-Retina) (Portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" />
<!-- iPad (non-Retina) (Landscape) -->
<link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Я не могу взять кредит на все это, но эта конфигурация работает. Просто скопируйте и вставьте, убедитесь, что изображения точно соответствуют размерам, указанным в их именах.

Ответ 4

Если один элемент ссылки отсутствовал, свойства медиа-контента не работали для меня. Код успешно отобразил изображение запуска на iPhone 3G и iPad (портретный и альбомный режим) .

<-- iPad - landscape (748x1024) -->
<link rel="apple-touch-startup-image" href="images/ipad-landscape.png"  media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<-- iPad - portrait (768x1004) -->  
<link rel="apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<-- iPhone - (320x460) -->
<link rel="apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />

Не удалось попробовать его для iPhone4 (high res), но, скорее всего, он работает одинаково.

Ответ 5

По-видимому, экран запуска работает только при следующих условиях:

1) должен быть точный размер, необходимый устройству. 2) при запуске приложения устройство должно находиться в портретной ориентации. 3) некоторые источники говорят только png, но jpg теперь работает.

Ответ 6

Самое полное решение: https://gist.github.com/tfausak/2222823

Ответ 7

Потрачено некоторое время на то, чтобы выяснить, как создать заставку для нового iPad (Retina), вот мое тестовое и рабочее решение для ориентации новой iPad (Retina).

P.S. перед публикацией этого я уже тестировал уже предоставленные решения, и они не работали.

<!-- iPad (Retina) (Portrait) -->
<link href="/img/ios/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- iPad (Retina) (Landscape) -->
<link href="/img/ios/apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Ответ 8

Это может быть очевидным для некоторых, но образ запуска не будет работать для меня, если я не добавил, что добавил ярлык на главный экран, запустил его оттуда и имел следующий код:

<meta name="apple-mobile-web-app-capable" content="yes" />

Эта страница была полезной для определения всего этого: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

Ответ 9

Как я смог получить 4 отдельных загрузочных изображения для WebApps на iPhone/iPad/iPhoneRetina, было сочетание нескольких вещей...

Не Retina iPhone (320x460):

            <link rel="apple-touch-startup-image" href="startup-iphone.jpg" />

Retina iPhone (4 и 4S) (640x920): Используйте технику Javascript, опубликованную выше. http://www.paulofierro.com/archives/568/

iPad (обе ориентации) сложно. Пейзаж должен быть 748w x 1024h, а "нижний" - левым. Портрет должен быть 768w x 1004h, а нижний - нижним. Я должен был включить теги iPad через PHP, обнаружив iPad в User Agent, иначе не загружалось бы загрузочное изображение iPhone, отличное от Retina. Вот код...

            <?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); ?>
            <?php if ($isiPad) { ?>
            <link rel="apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
            <link rel="apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
            <?php } ?>

Выполнение вышеописанного позволяет моему webapp (фактически простому блогу блога wordpress, в настоящее время работающему над ним в автономном режиме) иметь загрузочный образ для iPhone, Retina и обеих ориентации iPad. Протестировано на iPhone 3G с новейшими iOS 4, iPad и iPhone 4, работающими на последней версии iOS 5.

Конечно, вы также можете включить iPad-код через javascript. лол

Ответ 10

Я тестировал много раз, теперь я уверен, что он работает, когда вы действуете следующим образом: сначала держите свою площадку в портрете, откройте приложение, затем держите приложение по-своему, откройте приложение. отстой, но... кажется, это единственный способ сделать это. вы должны сначала удерживать свой пэд-портрет, чтобы "разблокировать" ошибку.

Ответ 11

Завершить meta:

<!-- Icons -->

<!-- iOS 7 iPad (retina) -->
<link href="icon-152x152.png"
      sizes="152x152"
      rel="apple-touch-icon">

<!-- iOS 6 iPad (retina) -->
<link href="icon-144x144.png"
      sizes="144x144"
      rel="apple-touch-icon">

<!-- iOS 7 iPhone (retina) -->
<link href="icon-120x120.png"
      sizes="120x120"
      rel="apple-touch-icon">

<!-- iOS 6 iPhone (retina) -->
<link href="icon-114x114.png"
      sizes="114x114"
      rel="apple-touch-icon">

<!-- iOS 7 iPad -->
<link href="icon-76x76.png"
      sizes="76x76"
      rel="apple-touch-icon">

<!-- iOS 6 iPad -->
<link href="icon-72x72.png"
      sizes="72x72"
      rel="apple-touch-icon">

<!-- iOS 6 iPhone -->
<link href="icon-57x57.png"
      sizes="57x57"
      rel="apple-touch-icon">

<!-- Startup images -->

<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (portrait) -->
<link href="startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPad (landscape) -->
<link href="startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone 5 -->
<link href="startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone (retina) -->
<link href="startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPhone -->
<link href="startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

Ответ 12

iPhone 6 и iPhone 6+

<link href="launch6.png" media="(device-width: 375px)" rel="apple-touch-startup-image">
<link href="launch6plus.png" media="(device-width: 414px)" rel="apple-touch-startup-image">

С помощью этой ссылки: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers

Ответ 13

Этот ответ дает удобный способ создать все 20 заставок, требуемых в настоящее время для iOS + обновленную разметку HTML для iOS 12.1.

Это включает в себя решения для iPhone XR, iPhone XS Max и 11" iPad Pro

Контекст

Safari на iOS теперь поддерживает Progressive Web Apps, но реализует его не так, как Chrome. Он читает файл manifest, но игнорирует объявленные в нем значки.

Вместо этого Safari ожидает список тегов apple-touch-startup-image. В то время как официальные документы Apple перечисляют этот пример:

<link rel="apple-touch-startup-image" href="/launch.png">

… это вводит в заблуждение, потому что (по крайней мере, для iOS 12.1) одного изображения недостаточно и оно не будет работать. Вместо этого Safari ожидает одно изображение для каждого разрешения.

Если заставка отсутствует или неверна, при загрузке будет отображаться белый экран, который выглядит непрофессионально и замедляет работу веб-приложения.

Создание заставок

В сети есть генераторы изображений apple-touch-startup-image, но они либо сломаны, либо вообще игнорируют Landscape, и их соглашения об именах не так уж хороши. Это проще.

Выполните следующую команду в bash в каталоге, содержащем файл logo.png, и он выдаст 20 изображений, ожидаемых Safari (десять разрешений для каждого из портретного и альбомного типов):

array=( 0640x1136 0750x1334 0828x1792 1125x2436 1242x2208 1242x2688 1536x2048 1668x2224 1668x2388 2048x2732 )
for i in "${array[@]}"
do
  split=(${i//x/ })
  portrait=$i
  landscape=${split[1]}x${split[0]}
  gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${portrait}  splash-portrait-${portrait}.png
  gm convert -background white -geometry $((10#${split[0]} / 5)) "logo.png" -gravity center -extent ${landscape} splash-landscape-${landscape}.png
done

Это зависит от GraphicsMagick, лучшей альтернативы ImageMagick. (На macOS, с brew, его так же легко установить, как и brew install graphicsmagick.

Разметка

Вот разметка HTML для всех 20 файлов:

<!--
 # SPLASH SCREENS FOR iOS.
 #
 # If the splash screen is missing or incorrect, a white screen will show on load, which looks unprofessional
 # and makes the (web)app feel slow.
 #
 # Constraints:
 # - Cannot use a single image for all.
 # - The size of the image must fit that of the targeted device, else no splash screen will show.
 # - There seems to be some leeway (e.g.: pictures 40px and 60px shorter did work), but unclear how much.
 # Bottom-line: you need one splash screen per resolution and orientation.
 #
 #
 # List of devices and resolutions (AUG-2019):
 #
 #     Device              Portrait size      Landscape size     Screen size        Pixel ratio
 #     iPhone SE            640px × 1136px    1136px ×  640px     320px ×  568px    2
 #     iPhone 8             750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone 7             750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone 6s            750px × 1334px    1334px ×  750px     375px ×  667px    2
 #     iPhone XR            828px × 1792px    1792px ×  828px     414px ×  896px    2
 #     iPhone XS           1125px × 2436px    2436px × 1125px     375px ×  812px    3
 #     iPhone X            1125px × 2436px    2436px × 1125px     375px ×  812px    3
 #     iPhone 8 Plus       1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone 7 Plus       1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone 6s Plus      1242px × 2208px    2208px × 1242px     414px ×  736px    3
 #     iPhone XS Max       1242px × 2688px    2688px × 1242px     414px ×  896px    3
 #     9.7" iPad           1536px × 2048px    2048px × 1536px     768px × 1024px    2
 #     7.9" iPad mini 4    1536px × 2048px    2048px × 1536px     768px × 1024px    2
 #     10.5" iPad Pro      1668px × 2224px    2224px × 1668px     834px × 1112px    2
 #     11" iPad Pro        1668px × 2388px    2388px × 1668px     834px × 1194px    2
 #     12.9" iPad Pro      2048px × 2732px    2732px × 2048px    1024px × 1366px    2
 #
 # Sources:
 # - Device and resolutions (Portrait size, Landscape size) from https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/
 # - Screen width as measured by JavaScript 'screen.width' and 'screen.height' in Simulator, except for:
 #   - 7.9" iPad mini 4 (not in Simulator): https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
 #   - 9.7" iPad (not in Simulator): had to assume they meant iPad Pro.
 #
 #
 # Tested on the following devices, in Simulator with iOS 12.1, in both Portrait and Landscape:
 #   iPhone 5s, iPhone 6, iPhone 6 Plus, iPhone 6s, iPhone 6s Plus, iPhone 7, iPhone 7 Plus, iPhone 8,
 #   iPhone 8 Plus, iPhone SE, iPhone X, iPhone XS, iPhone XS Max, iPhone XR, iPad Air, iPad Air 2,
 #   iPad (5th generation), iPad Pro (9.7-inch), iPad Pro (12.9-inch), iPad Pro (12.9-inch) (2nd generation),
 #   iPad Pro (10.5-inch), iPad (6th generation), iPad Pro (11-inch), iPad Pro (12.9-inch) (3rd generation).
 # Everything worked fine (splash screen showing in every single case.)
 #
 # FYI:
 # - tvOS does not come with a browser. So the largest screen to care for is an iPad.)
 # - On all iPads (in Simulator), had to either Add to Home twice or restart the device to see the icon.
 #   WOULDDO Test on a real iPad.
 -->
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-0640x1136.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="/assets/site/img/splash/splash-portrait-0750x1334.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="/assets/site/img/splash/splash-portrait-0828x1792.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-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="/assets/site/img/splash/splash-portrait-1242x2208.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="/assets/site/img/splash/splash-portrait-1242x2688.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1536x2048.png" media="(device-width:  768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2224.png" media="(device-width:  834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-1668x2388.png" media="(device-width:  834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-portrait-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1136x0640.png" media="(device-width:  320px) and (device-height:  568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1334x0750.png" media="(device-width:  375px) and (device-height:  667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-1792x0828.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2436x1125.png" media="(device-width:  375px) and (device-height:  812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2208x1242.png" media="(device-width:  414px) and (device-height:  736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2688x1242.png" media="(device-width:  414px) and (device-height:  896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2048x1536.png" media="(device-width:  768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2224x1668.png" media="(device-width:  834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2388x1668.png" media="(device-width:  834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="/assets/site/img/splash/splash-landscape-2732x2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">

(Лично я храню комментарии в блоке комментариев Twig, поэтому я сохраняю информацию, не загрязняя клиента слишком большим количеством текста.)

Некоторые примеры, которые я видел в Интернете, использовали min-device-*, но это не имеет особого смысла в этом контексте, поскольку Safari ожидает изображения в (near-) точных измерениях.

Некоторые другие примеры, которые я видел, использовали более короткие изображения (на 40 или 60 пикселей короче, то есть без строки состояния). Старые версии iOS, похоже, ожидали таких размеров, но это уже не так.

Прощальные мысли

96% моих пользователей iOS используют iOS 12.x, поэтому, к счастью, не нужно слишком заботиться о старых версиях iOS. Но если я что-то пропустил, пожалуйста, дайте мне знать.

В то время как Android, как большой мальчик, рад показать значок приложения в качестве заставки, iOS и Safari заставляют нас выполнять всю эту дополнительную работу. 20 изображений, чтобы показать простой заставки! Это безумие! В будущем все может стать лучше, но сейчас так оно и есть.

Это элементарное задание потребовало много кода и тестирования. Надеюсь, это кому-нибудь поможет.

Я постараюсь обновлять его с новыми разрешениями. Пожалуйста, оставьте комментарий, если вы видите, что один отсутствует.

Ответ 14

10.2" iPad должен быть добавлен...

// Device Portrait size Landscape size Screen size Ratio // 10.2" iPad 1620px × 2160px 2160px x 1620px 810px × 1080px 2

Ответ 15

Если вы хотите настроить таргетинг на сетчатку, я нашел решение и написал об этом здесь: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome

В принципе, свойства свойств и медиа-запросы не будут работать. При загрузке страницы вам необходимо ввести изображение с высоким разрешением с помощью JavaScript. Хакки, но работает.