Стартовый экран веб-приложения iPhone

Question

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

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

Answer 1

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

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

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

Answer 2

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

Документы Apple — изображения запуска, Документы Apple: размеры значков и изображений

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

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

Answer 4

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