Pantalla de inicio de la aplicación web iPhone

Question

Estoy trabajando en una aplicación web para iPhone en la que estoy usando la metaetiqueta "apple-mobile-web-app-capable" para obtener el "modo de pantalla completa". Cuando lance la aplicación, muestra una imagen de la página donde me fui la última vez que se carga. Parece que la aplicación está lista para recibir entrada cuando no está, y eso es confuso.

¿Es posible cambiar el comportamiento predeterminado y mostrar una pantalla en blanco hasta que esté listo para recibir la entrada?

Answer 1

poner esto entre sus etiquetas HEAD:

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

La imagen que use debe ser JPG o PNG con una resolución de 320x460

Answer 2

La imagen debe ser PNG y 320x460 esto funciona sólo en el iPhone OS 3.0 o mas alto.

Answer 3

DEBE ser 320x460, NO funcionará si es 320x480.

Answer 4

Esto agregará una pantalla de bienvenida a su aplicación web. A continuación se detallan los tamaños que necesitará para iPad (retina y no), iPhone/iPod Touch (retina y no) y iPhone 5. Estos incluyen también el área de la barra de estado.

Apple Docs-Launch Images, Apple Docs-Icon and Image Sizes

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

Si la creación de una aplicación web para la compatibilidad del iPad se recomienda que se utilizan tanto en horizontal y tamaños retrato.