Несколько разрешений «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

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

Answer 2

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

Non-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. лол

Answer 3

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

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