Múltiples resoluciones “apple-touch-startup-image” para la aplicación web iOS (especialmente para iPad)?

He escrito una aplicación web iOS basada en HTML5 y parece que todo funciona bien, pero estoy tratando de pulirla con varias pantallas de inicio. El iPhone / iPod touch funciona bien con un PNG de 320×460, de la siguiente manera:

 

Encontré mucha documentación que dice que las imágenes de inicio para el iPad deberían, como el iPhone / iPod touch, tener el 20px afeitado desde la altura para acomodarse a la barra de estado dando resoluciones de 768×1004 (vertical) o 1024×748 (horizontal). Sin embargo, en mis pruebas (actualmente con un iPad con iOS 3.2.2), solo funciona la resolución 768×1004 (vertical) (pero es incorrecta -20 píxeles demasiado estrecha- cuando está en modo horizontal).

He intentado lo siguiente (una conjetura descabellada basada en la funcionalidad de los enlaces apple-touch-icon ), sin éxito:

    

Solo la imagen de resolución 768×1004 funciona si es el último elemento de link lista. Si la imagen de resolución de 1024×748 es la última, se renderiza un fondo gris en su lugar (pero nunca el 768×1004). Entonces, obviamente, el link apple-touch-startup-image no admite el atributo de sizes .

¿Esto es compatible con las versiones más nuevas de iOS? ¿Hay alguna forma de admitir múltiples imágenes de inicio? ¿Debo crear una imagen de inicio de 1024×768? Si es así, ¿se reducirá el tamaño del iPhone / iPod touch? ¿O debería abandonar y no tener una imagen de inicio para el iPad?

solución definitiva para la imagen de inicio y los icons táctiles para iPad y iPhone (paisaje || retrato) y (retina || no):

                          

De hecho, lo tengo para trabajar en modo paisaje. Obtuve la información aquí: https://gist.github.com/472519 .

El problema es que la imagen del paisaje tiene que ser de 748×1024 (una imagen de paisaje de lado, giré en el sentido de las agujas del reloj) en lugar de 1024×748.

También tuve que iniciar la aplicación en modo retrato primero y luego paisaje.

Solo quería ofrecer una combinación de respuestas que realmente funcionó. Encontramos que con la respuesta que se seleccionó, las versiones retina de las imágenes splash no se estaban utilizando. La respuesta de Pavel arregló la versión de la retina para el iPad. Lo siguiente ha sido probado en iPhone (Retina y no retina) y iPad (retina y no retina).

                       

No puedo atribuirme el mérito de nada de esto, pero esta configuración funciona. Solo copie y pegue, asegúrese de hacer que las imágenes sean exactamente del tamaño indicado en sus nombres.

Si faltaba un elemento del enlace, las cosas de la propiedad multimedia no me funcionaban. El código muestra con éxito una imagen de inicio en un iPhone 3G y iPad (modo retrato y paisaje).

 <-- iPad - landscape (748x1024) -->  <-- iPad - portrait (768x1004) -->  <-- iPhone - (320x460) -->  

No podría intentarlo con el iPhone4 (alta resolución), pero lo más probable es que funcione de la misma manera.

La solución más completa y esencial: https://gist.github.com/tfausak/2222823

Aparentemente, la pantalla de inicio solo funciona bajo las siguientes condiciones

1) debe ser del tamaño exacto requerido por el dispositivo. 2) el dispositivo debe estar en orientación vertical cuando se inicia la aplicación. 3) algunas fonts dicen que solo png pero jpg parece funcionar ahora.

La forma en que pude obtener 4 imágenes de inicio individuales para WebApps en el iPhone / iPad / iPhoneRetina fue una combinación de algunas cosas …

IPhone sin Retina (320×460):

   

Retina iPhone (4 y 4S) (640×920): utilice la técnica Javascript publicada anteriormente. http://www.paulofierro.com/archives/568/

iPad (ambas orientaciones) es complicado. El paisaje debe ser de 748w x 1024h, con el “fondo” en el lado izquierdo. El retrato debe ser 768w x 1004h, con el “fondo” abajo. Tuve que incluir las tags de iPad a través de PHP detectando el iPad en el agente de usuario, de lo contrario, la imagen de inicio del iPhone no retina no se cargaría. Aquí está el código …

       

Hacer lo anterior le permite a mi aplicación web (en realidad, un sitio simple de blog de wordpress, que actualmente trabaja en ella sin conexión) tener una imagen de inicio para iPhone, Retina y ambas orientaciones para iPad. Probado en iPhone 3G con la última versión de iOS 4, iPad y iPhone 4 con el último iOS 5.

Por supuesto, también podría incluir el código de iPad a través de javascript. lol

He probado muchas veces, ahora estoy seguro de que funciona cuando actúas de esta manera: primero mantén la almohadilla en posición vertical, abre tu aplicación, luego mantén la aplicación en horizontal, abre tu aplicación. apesta, pero … parece que esta es la única forma de hacerlo. primero tienes que sostener el retrato de tu pad para “desbloquear” el error.

Pasé algún tiempo tratando de descubrir cómo crear una pantalla de presentación para el nuevo iPad (Retina), esta es mi solución probada y funcional para ambas orientaciones del nuevo iPad (Retina).

PD antes de publicar esto ya probé soluciones y no funcionaron.

     

Esto puede ser obvio para algunos, pero la imagen de inicio no funcionaría para mí a menos que añadiera agregué un acceso directo a la pantalla de inicio, la ejecuté desde allí y tuve el siguiente código:

  

Esta página fue útil para descifrar todo esto: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

Meta completa:

                               

Si desea orientar la visualización de la retina, encontré una solución y escribí en el blog aquí: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps- retina-displays-also-welcome

Básicamente, la propiedad de tamaños y las consultas de medios no funcionarán. Debe inyectar la imagen de inicio de alta resolución a través de JavaScript una vez que su página esté cargada. Hacky pero funciona