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

Question

Я написал веб-приложение для 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?

Answer 1

окончательное решение для startup-image и touch-icons для 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" />

Answer 2

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

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

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

Answer 3

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

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

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

Answer 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 (высокое разрешение), но, скорее всего, он работает так жеспособ.

Answer 5

Наиболее полное, суть решения: https://gist.github.com/tfausak/2222823

Answer 6

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

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

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

Answer 7

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

PS, прежде чем публиковать это Iпротестировал уже предоставленные решения, и они не сработали.

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

Answer 8

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

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

Answer 9

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

Answer 10

Полная мета:

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