Изображение при загрузке в веб-приложении для отображения Retina?

Question

Кто-нибудь знает, как заставить iOS отображать загрузочное изображение с более высоким разрешением при использовании?В настоящее время я застрял с изображением 460x380, которое, очевидно, выглядит ужасно при отображении на дисплее iPhone 4 с высоким разрешением.Я попробовал трюк @ 2x, но, похоже, не сработало.

Есть идеи или обходные пути?

Answer 1

Я никогда не думал, что это сработает, но по какой-то причине везде в Интернете утверждают, что размеры изображений высокого разрешения 640x960, а на самом деле 640x920. Когда вы сделаете это изменение, заставка высокого разрешения будет правильно отображаться на дисплеях сетчатки. Ниже приведен точный код, который я использую в нашем приложении. У нас есть заставки, работающие на iPad1 / iPad2 Portrait and Landscape, iPhone3 / iPhone4

Надеюсь, это кому-нибудь поможет.

  <!-- iOS Device Startup Images -->
<!-- iPhone/iPod Touch Portrait – 320 x 460 (standard resolution) -->
<link rel="apple-touch-startup-image" href="splash-screen-320x460.png" media="screen and (max-device-width: 320px)" />

<!-- iPhone/iPod Touch Portrait – 640 x 920 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="splash-screen-640x920.png" />

<!-- For iPad Landscape 1024x748 -->
  <!-- Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" sizes="1024x748" href="splash-screen-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<!-- For iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="splash-screen-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"/>

Answer 2

Вы пытались использовать медиа-запросы, связанные с соотношением пикселей в теге link?

media="only screen and (-webkit-min-device-pixel-ratio: 2)" для дисплея сетчатки один.

Answer 3

iPad:

link rel="apple-touch-startup-image" sizes="768x1004" href="" /
iPhone Retina Display: link rel="apple-touch-startup-image" sizes="640x960" href="" /

Answer 4

Я видел случаи, когда XCode не справлялся с этой ситуацией.В дополнение к двойной проверке размера изображения (320x460) не помешает:

1. Убедитесь, что оба изображения находятся в сборке.(Щелкните правой кнопкой мыши по опции «Заголовок файла» и выберите «Целевое членство», а затем убедитесь, что флажок установлен.)
2. Выполните чистую сборку.
3. Удалите все файлы сборки в вашемпостроить каталог.(Чистый не получает ВСЕ из них.)
4. Удалите приложение из целевого телефона / сима.

Я знаю, это может показаться очевидным или ненужным, но я ударился головойс той же проблемой и исправлена ​​последовательность очистки / удаления / удаления.

Answer 5

Трюк "@ 2x" работает. Возможно, с вашими изображениями что-то не так.

Вы хотите два файла. Default.png и Default@2x.png. Первый должен быть 320х460. Второй должен быть 640х920. Я обещаю, что это работает.