¿Cómo consigo que la orientación de la imagen de inicio funcione correctamente en una aplicación web HTML5 / Javascript / CSS para Safari móvil en el iPad / iPhone?

Esta no es una pregunta simple, pero haré todo lo posible para ayudar.

En primer lugar, no hay forma de especificar una imagen de inicio para “cada una de las 4 orientaciones”. Su siguiente mejor opción en este caso es establecer una orientación vertical y horizontal.

De acuerdo con la documentación de Apple, solo puede especificar una imagen de inicio para retrato … Solo en el iPhone …. solo en no retina. Esto es falso (presumiblemente anticuado). Puede usar consultas de medios para orientar orientaciones, pero

  1. El tamaño de la imagen que usa debe ser preciso
  2. Debe tener en cuenta el tamaño de la barra de menú (20 px)
  3. Debe usar consultas de medios para expresar la orientación y la resolución de pantalla

Aquí está el código que utilicé más recientemente para lograr esto, con algunas adiciones no probadas para tratar de responder su pregunta con precisión. Estaré encantado de volver a esta respuesta una vez que haya tenido tiempo de probarla a fondo:

  
 
 
  
 
 
 
 
 
 
 
  

Ahora sé que esta es una respuesta a medias, y lo siento, pero esta es la única información con la que puedo ayudarlo sobre el tema, al menos hasta que Apple decida actualizar su documentación.