Подтвердить что ты не робот

IOS/iPhone: экран заставки для веб-приложений не отображается

У меня есть следующий код в <head> моего веб-приложения, но я просто получаю белый экран на своем iPhone 3GS, а DOM загружается вместо заставки.

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!--STYLES-->

<!--SCRIPTS-->

<!-- iPhone LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5+ LAUNCHSCREEN-->
<link href="includes/images/apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="apple-touch-startup-image">

Как я могу заставить свой экран заставки правильно отображаться на всех версиях iPhone? Код не показан, но мои значки веб-приложений работают при добавлении на главную страницу. Я использую jQuery Mobile для создания этого веб-приложения.

Я также подтвердил, что изображения PNG точно соответствуют размерам, и я удалил значок веб-приложения, обновился и повторно добавлен на рабочий стол несколько раз. Ни одно из решений, которые я нашел в StackOverflow, не сработало для меня. Я не пробовал решения JavaScript, потому что я уверен, что есть чистое решение CSS.

4b9b3361

ОТВЕТЫ

Ответ 1

Атрибут sizes работает для apple-touch-icon, но он не работает для apple-touch-startup-image s. Единственный способ настроить таргетинг на загрузочные образы - это медиа-запросы. Ответ Адама хорош, но полагается на <link> в определенном порядке, поскольку медиа-запросы недоопределены. Вот полнотекстовые медиа-запросы:

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png"
      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="apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

Также обратите внимание, что некоторые видовые экраны заставят ваше веб-приложение быть почтовым ящиком на iPhone 5:

<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
      content="width=device-width">
<meta name="viewport"
      content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
      content="initial-scale=1.0">
<meta name="viewport"
      content="width=320.1">

Я поддерживаю Gist с минимальным веб-приложением iOS, включая загрузочные образы и значки. Если вы хотите получить больше комментариев, я также написал сообщение в блоге об автозагрузках iPhone 5.

Ответ 2

Вот размеры, которые следует использовать:

<!-- iPhone -->
<link href="#" onclick="location.href='http://www.example.com/mobile/images/apple-startup-iPhone.jpg'; return false;" media="(device-width: 320px)" rel="apple-touch-startup-image">

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

<!-- iPhone Tall (Retina) -->
<link href="#" onclick="location.href='http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg'; return false;" rel="apple-touch-startup-image" sizes="640x1096">

<!-- iPad (portrait) -->
<link href="#" onclick="location.href='http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg'; return false;" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">

<!-- iPad (landscape) -->
<link href="#" onclick="location.href='http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg'; return false;" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">

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

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