Экран запуска веб-приложения iPhone

Question

Я работаю над веб-приложением для iPhone, где использую метатег «apple-mobile-web-app-based», чтобы получить «полный экран». Когда я запускаю приложение, оно показывает изображение страницы, на которой я остановился в последний раз, пока оно загружается. Похоже, что приложение готово к приему информации, когда это не так, и это сбивает с толку.

Можно ли изменить поведение по умолчанию и показать пустой экран, пока он не будет готов к приему ввода?

Answer 1

Это добавит заставку в ваше веб-приложение. Ниже приведены размеры, которые вам понадобятся для iPad (как с сетчаткой, так и без него), iPhone / iPod Touch (с сетчаткой и без сетчатки) и iPhone 5. Они также включают область строки состояния.

Изображения для запуска Apple Docs , Размеры значков и изображений Apple Docs

<!-- 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

Это ДОЛЖНО быть 320x460, оно НЕ будет работать, если его 320x480.

Answer 3

поместите это между тегами HEAD:

<link rel="apple-touch-startup-image" href="image.jpg">

Используемое изображение должно быть в формате JPG или PNG с разрешением 320x460

Answer 4

Изображение должно быть PNG и 320x460, это работает только под iPhone OS 3.0 или выше.