iPhone 4 Retina "apple-touch-startup-image" для веб-приложений

Question

Это было задано несколько раз здесь, но без твердого и понятного ответа. Это веб-приложение , а не нативное приложение.

Я использую:

<link rel="apple-touch-startup-image" href="images/startup.png" />

для отображения загрузочного изображения. Он отлично загружается, если разрешение изображения составляет 320x460. Я попытался использовать разрешение сетчатки, которое составляет 640x920 (40 пикселей выводятся в строке состояния), но это не сработало. Я попробовал @2x вещь, которая тоже не удалась.

Возможно ли это [пока]?

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

Документация (найдено здесь ) гласит:

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

Я проверил, предоставляя разные размеры, но если размер не точно 320x460, изображение просто игнорируется.Apple не дает четкого заявления о том, можно ли включать изображения для запуска в высоком разрешении, но сообщения на форуме (например, здесь: Apple Dev Forum ) предполагают, что в настоящее время это невозможно.

Answer 3

Только что проверил ... Apple добавила атрибут "размеры".так, для высокого разрешения, вы добавляете размеры = "640x920" и т. д. Я полагаю, это работает и для другой ориентации.

Answer 4

Так что, если я хорошо понимаю, нам на самом деле нужны 8 разные изображения, учитывая, что у нас есть 3 параметры для учета:

• Устройство (iPhone илиiPad)
• Разрешение (сетчатка или нет)
• Ориентация (книжная или альбомная)

Я прав?

Answer 5

Это работает для меня:

<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" />