iOS/iPhone: La pantalla de presentación de la aplicación web no aparece

Tengo el siguiente código en el <head> de mi aplicación web, pero estoy obteniendo una pantalla blanca en mi iPhone 3GS mientras el DOM carga en lugar de la pantalla de inicio.iOS/iPhone: La pantalla de presentación de la aplicación web no aparece

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

¿Cómo puedo obtener mi pantalla de bienvenida para visualizar correctamente en todas las versiones del iPhone? No se muestra el código, pero los iconos de mi aplicación web funcionan cuando se agregan a la página principal. Estoy usando jQuery Mobile para construir esta aplicación web.

También he confirmado que las imágenes PNG son exactamente de los tamaños correctos y he eliminado el ícono de la aplicación web, actualizado y vuelto a agregar a la pantalla de inicio varias veces. Ninguna de las soluciones que he encontrado en StackOverflow me ha funcionado. No he probado las soluciones JavaScript, porque estoy seguro de que hay una solución pura de CSS.

Fuente

2012-09-28 Mark Rummel

El atributo sizes trabaja para apple-touch-icon s pero no funciona para apple-touch-startup-image s. La única forma de orientar las imágenes de inicio es con consultas de medios. La respuesta de Adam es buena, pero se basa en que el <link> está en un orden particular ya que las consultas de los medios están sub-especificadas. Aquí están las preguntas de los medios totalmente calificados:

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

También tenga en cuenta que ciertos puertos de vista hará que su aplicación web que se letterboxed en el 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">

que mantienen a Gist with a minimal iOS web app, incluyendo imágenes de inicio y los iconos . Si quieres más comentarios, también escribí a blog post about iPhone 5 startup images.

Fuente

2012-10-03 15:03:20

¡Impresionante! Voy a probar esto. ¡Gracias! –

¿Esto funcionó para usted? Si es así, ¿puedes marcarlo como aceptado? –

Si ayuda a alguien, los tamaños de bienvenida del iPhone 6 están aquí: http://stackoverflow.com/a/26057714/188926 – Dunc

Estas son las dimensiones a utilizar:

<!-- iPhone --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px)" 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 (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

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

<!-- iPad (portrait) --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (orientation: portrait)" 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 (orientation: landscape)" rel="apple-touch-startup-image"> 

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

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

Fuente

2012-09-28 16:28:01 adamdehaven

Usó '640 x 1096' para iPhone Tall, pero en [Directrices de interfaz humana de iOS de Apple] (http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/ IconsImages.html) dicen que debería ser '640 x 1136'. ¿Lo cual está bien? –

No está teniendo en cuenta los 40 píxeles ocupados por la barra de estado. El '640 x 1136' es para una imagen de inicio de la aplicación. '640 x 1096' es correcto. – adamdehaven

iOS/iPhone: La pantalla de presentación de la aplicación web no aparece

Respuesta

Cuestiones relacionadas