Tengo el siguiente código en la <head> de mi web app, pero me estoy haciendo una pantalla en blanco en mi iPhone 3GS, mientras que el DOM carga en lugar de la pantalla de presentación.

<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 presentación para mostrar correctamente en todas las versiones del iPhone? El código no se muestra, pero en mi web, los iconos de las aplicaciones son de trabajo cuando se añade a la página de inicio. Estoy usando jQuery Mobile para crear esta aplicación web.

Yo también me han confirmado que las imágenes PNG son exactamente los tamaños correctos y he eliminado el icono de la aplicación web, actualizar y volver a agregar a la pantalla varias veces. Ninguna de las soluciones que he encontrado en StackOverflow han trabajado para mí. No he probado el JavaScript soluciones, porque estoy seguro de que no es un puro CSS solución.

InformationsquelleAutor Mark Rummel | 2012-09-28

2 Comentarios

  1. 49

    La sizes atributo funciona para apple-touch-icons pero no funciona para apple-touch-startup-images. La única manera de orientar el inicio de las imágenes es con preguntas de los medios. Adán respuesta es buena, pero se basa en la <link>s de estar en un orden en particular desde las consultas de medios de comunicación están bajo especificado. Aquí se completa preguntas de los medios:

    <!-- 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 vistas hará que su aplicación web para ser proporcionado 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">

    Mantener una Esencia con un mínimo de iOS de la aplicación web de, incluyendo el inicio de las imágenes y los iconos. Si quieres algo más comentario, yo también escribió un blog post sobre el iPhone 5 imágenes de inicio.

    • Impresionante! Voy a probarlos. Gracias!
    • Hice este trabajo para usted? Si es así, ¿de que marca es aceptada?
    • Si ayuda a alguien, el iPhone 6 splash tamaños están aquí: stackoverflow.com/a/26057714/188926
    • podría usted hacer y proporcionar una plantilla de proyecto GIT, incluyendo la pantalla de inicio de imágenes ? Yo no creo que ninguno está disponible y nunca he tenido éxito todavía para ver cualquier pantalla de presentación en la pantalla de inicio de la aplicación web de
    • No, no estoy interesado en el mantenimiento de un repositorio Git para esto. Todo lo que usted necesita, aparte de las imágenes en sí, está disponible en la Esencia. (Incluso puede clonar la Esencia como a un repositorio Git!)
    InformationsquelleAutor Taylor Fausak
  2. 3

    Aquí 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">
    • Se utiliza 640 x 1096 para el iPhone de Altura, pero en Apple iOS Human Interface Guidelines dicen que debe ser 640 x 1136. Que es derecho?
    • No está de contabilidad para el 40 píxeles tomado por la barra de estado. El 640 x 1136 es una aplicación de la imagen de inicio. 640 x 1096 es correcta.
    InformationsquelleAutor adamdehaven

Dejar respuesta

Please enter your comment!
Please enter your name here