Это задано несколько раз здесь, но без твердого и понятного ответа. Это веб-приложение, а не родное.
Я использую:
<link rel="apple-touch-startup-image" href="images/startup.png" />
чтобы отобразить загрузочное изображение. Он загружается отлично, если разрешение изображения составляет 320x460. Я попытался использовать разрешение сетчатки, которое составляет 640x920 (40 пикселей вывезено в строке состояния), что не сработало. Я пробовал вещь @2x, тоже не удалось.
Возможно ли еще [?]?
Это добавит всплывающий экран в ваше веб-приложение. Ниже приведены размеры, которые вам нужны как для 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 рекомендуется использовать как размеры ландшафта, так и портрет.
Документация (найденная здесь) говорит:
На iPhone и iPod touch изображение должно быть 320 x 460 пикселей и в портретной ориентации.
Я тестировал различные размеры, но если размер не точно 320x460, изображение просто игнорируется. В Apple нет четкого заявления о том, можно ли включать изображения с высоким разрешением, но сообщения на форуме (например, здесь: Apple Dev Forum) показывают, что в настоящее время это невозможно.
Просто тестирование... apple добавили атрибут "размеры". поэтому для hi-res вы добавляете размеры = "640x920" и т.д. Я полагаю, это работает и для другой ориентации.
Это работает для меня:
<link rel="apple-touch-startup-image" media="screen and (max-device-width: 320px)" href="images/iphone_splash.png"/>
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone_splash_hires.png" />
Итак, если я хорошо понимаю, нам действительно нужны 8 разные изображения, учитывая, что у нас есть параметры 3:
Я прав?