Эта ссылка не работает.

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

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

Я нашел много документации, в которой говорится, что загрузочные образы для iPad, такие как iPhone / iPod touch, должны быть выбриты с высоты 20 пикселей, чтобы соответствовать строке состояния с разрешением 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?

 mattstuehler05 авг. 2011 г., 17:06
Моргант - спасибо за отличный вопрос! Просто из любопытства ... знаете ли вы, можно ли указать экран запуска с высоким разрешением для iphone 4 (т.е. 640x920)?
 derickito07 февр. 2012 г., 23:57
Мой ответ удовлетворил ваш вопрос? Если да, можете ли вы выбрать его в качестве ответа? Спасибо
 morgant04 дек. 2016 г., 16:19
@ alej27 Спасибо, что указали на это, я считаю, что размер изменился за последние 5 лет с того момента, когда я изначально задавал вопрос (количество ответов за этот период включает в себя одно и то же начальное значение).
 alejnavab01 дек. 2016 г., 19:42
По словам Apple (developer.apple.com/library/content/documentation/...) первое изображение, которое вы сказали, что это было 320 х 460, должно быть 320 х480.

Ответы на вопрос(13)

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

Постскриптум перед публикацией я проверил уже предоставленные решения, и они не работали.

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

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

В основном свойство размеров и медиазапросы не будут работать. Вы должны внедрить загрузочное изображение в высоком разрешении через JavaScript после загрузки вашей страницы. Хаки но работает.

 Matthew Schinckel17 окт. 2012 г., 06:10
Эта ссылка не работает.

у меня ничего не получалось. Код успешно отображал стартовое изображение на 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 (высокое разрешение), но, скорее всего, он работает так же.

 madoke25 мая 2012 г., 11:16
да, у меня тоже работает
 Courtney Christensen24 авг. 2011 г., 20:20
+1, это работает.
 morgant13 июл. 2011 г., 21:29
Ага, я не думал попробовать атрибуты "медиа"! Я дам этому шанс и посмотрю, как оно пойдет.
 René04 авг. 2011 г., 14:29
Обратите внимание, что размеры ландшафта перевернуты! Пейзажное изображение имеетширина 748, а не 1024, а высота 1024. Это означает, что ваше пейзажное изображение должно быть повернуто на 90 градусовпо часовой стрелке.

как я смог получить 4 отдельных загрузочных образа для веб-приложений на 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 (обе ориентации) сложно. Пейзаж должен быть 748 × 1024 ч, а «низ» - слева. Портрет должен быть 768 х 1004 ч, а «низ» - снизу. Мне пришлось включить теги iPad через PHP, обнаружив iPad в пользовательском агенте, иначе загрузочное изображение iPhone без сетчатки не загрузилось бы. Вот код ...

            <?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 } ?>

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

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

 monzonj17 янв. 2012 г., 09:09
Привет, спасибо за указание, что размеры портрета на самом деле 768x1004. Я использовал 748x1024 для изображения и не работал. Это работает сейчас.

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

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

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

теперь я уверен, что он работает, когда вы действуете так: сначала держите планшет в портретной ориентации, открывайте приложение, а затем - в альбомной ориентации, открывайте приложение. отстой, но ... кажется, это единственный способ сделать это. Вы должны сначала держать свой портрет пэда, чтобы «разблокировать» ошибку.

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

которые действительно сработали. Мы нашли с ответом, который был выбран, версии сетчатки изображений заставки не использовались. Ответ Павла исправил версию сетчатки для 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" />

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

 Andrej13 мая 2013 г., 17:46
@JacobMouka Не обязательно в корне. Путь относительно каталога, в котором находится HTML-файл.
 Jacob Mouka08 мая 2013 г., 23:19
спасибо, это сработало, но только когда изображения были в корневом каталоге.
 Eirik H27 июн. 2013 г., 08:09
Работает на моей машине ™ с примененным путем, напримерhref="img/apple-touch-startup-image-320x460.png" до тех пор, пока это относительно пути, по которому страница обслуживается. Используйте инструменты разработчика в обычном настольном браузере и проверьте правильность адресов изображений ...
 Jacob Mouka23 мая 2013 г., 00:26
@ Андрей, я скучал. Я не имею в виду корневую папку, но тот же каталог, что и HTML-страница. Когда ссылка на ссылку содержала какие-либо пути, загрузочные образы не загружались (но значки все-таки ... переходите к рисунку).
 Chris13 мая 2013 г., 15:22
Да, хороший звонок, я не уверен, хорошо это или плохо иметь их в корне. Я просто следовал своим старым мыслям о фавиконе, полагая, что если фавикон сидит в корне, другие более новые «фавиконы» тоже могут это сделать.

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

 René17 окт. 2011 г., 13:18
Нет, подождите, я провел еще несколько тестов, и эта ошибка была исправлена ​​в iOS 5! Теперь образ запуска отображается с первого или второго запуска с домашнего экрана независимо от ориентации iPad. Просто запомните медиазапросы на теги LINK! Если вы не включите их, вы будете испытывать странное поведение.
 René16 окт. 2011 г., 20:29
Это правильно, что образ запуска работает только в портретном режиме, и, к сожалению, это все еще имеет место с iOS 5. Я действительно надеялся, что они исправят это с iOS 5, но не повезло. :-(

окончательное решение длястартап-изображение а такжесенсорные иконки для 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" />
 Marconi27 дек. 2013 г., 19:55
@ChristopheHerreman: может быть, вы имели в виду портрет?
 Christophe Herreman24 дек. 2013 г., 11:14
Ширина устройства для «iPad (Retina, альбомная) SPLASHSCREEN» должна быть 768, а не 1536.
 balexandre02 дек. 2012 г., 03:36
Для тех, кто достигает здесь и хочетiPhone 5 размер начального изображения:stackoverflow.com/a/12471432
 Marconi25 окт. 2012 г., 11:58
очевидно нет! : D
 Mahdi Ghiasi18 сент. 2012 г., 20:08
являетсяpackaging/ необходимо в третьемlink тег?

информацию здесь:https://gist.github.com/472519.

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

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

 René04 авг. 2011 г., 14:25
Очень информативная ссылка, большое спасибо! - Это заставило меня работать.
 John Bubriski♦28 нояб. 2011 г., 20:58
Подчеркну, что сначала нужно запустить iPad в портретном режиме! По крайней мере, в 4.3.3 вы делаете.

Полная мета:

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

Ваш ответ на вопрос