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

Question

Я работаю над веб-приложением 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 также загружает меньшее из двух.

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

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