apple-touch-startup-image загрузка изображения с неправильным разрешением

Я делаю веб-приложение Sencha Touch с указанными ниже заставками. Изображения имеют размер 640x920 и 320x460 соответственно (с учетом строки состояния и следуя примеру от Sencha).

<link rel="apple-touch-startup-image" media="screen and (resolution: 326dpi)" href="/resources/img/startup_640.png" />
<link rel="apple-touch-startup-image" media="screen and (resolution: 163dpi)" href="/resources/img/startup.png" />

Однако на iPhone 4 я все еще вижу только изображение с низким разрешением. (Чтобы упростить задачу, я встроил текст «640x920» и «320x460» в соответствующее изображение, чтобы убедиться, что я смотрю правильные изображения.)

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

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

Есть другие предложения?

РЕДАКТИРОВАТЬ: Точно так же apple-touch-icon-precomposed загружает меньший из двух.


iphone splash-screen resolution sencha-touch
person Old McStopher    schedule 21.06.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Это добавит экран-заставку в ваше веб-приложение. Ниже приведены размеры, которые вам понадобятся как для iPad, так и для iPhone / iPod Touch, включая область строки состояния.

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg"  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad Portrait -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPad Landscape -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPad Portrait (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad Landscape (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

При создании веб-приложения для совместимости с iPad рекомендуется использовать как альбомную, так и книжную ориентацию.

person adamdehaven    schedule 04.03.2012
comment
Я пробовал все это разными способами, но ни iPad 2, ни симулятор не распознают атрибут размера. - person Rob Porter; 13.03.2012
comment
Приведенный выше код взят из моего веб-приложения ... У меня никаких проблем не было. Я бы на 100% был уверен, что ваши изображения имеют точный правильный размер и что вы вставляете приведенный выше код в <head> документа сразу после ваших метатегов. Я читал в некоторых местах, что изображение ДОЛЖНО быть в формате jpg, хотя я этого не видел. - person adamdehaven; 13.03.2012

arrow_upward
1
arrow_downward

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

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

person Paulo Fierro    schedule 01.09.2011

arrow_upward
0
arrow_downward

Похоже, что на данный момент Apple не поддерживает загрузочное изображение с разрешением дисплея Retina. Согласно их документам .. .

На iPhone и iPod touch изображение должно быть 320 x 460 пикселей в портретной ориентации.

В этой статье ничего не говорится о поддержке загрузочных образов высокого разрешения.

Еще одно полезное обсуждение этой проблемы можно найти здесь.

person Old McStopher    schedule 17.07.2011