apple-touch-startup-image (pantallas de bienvenida de iOS)
apple-touch-startup-image es una etiqueta link que establece la pantalla de bienvenida que iOS muestra mientras se lanza una web app de la pantalla de inicio. A diferencia del icono, no es un solo archivo: iOS quiere una imagen aparte, con el tamaño exacto, por resolución y orientación de dispositivo, cada una seleccionada con una media query. Es lo bastante engorroso como para que muchos sitios lo omitan o generen todo el conjunto con una herramienta.
Una imagen por dispositivo, elegida por media query
iOS no escala una única imagen de bienvenida para que encaje. Hace coincidir las dimensiones exactas de píxel del dispositivo y la orientación, así que cada dispositivo necesita su propia etiqueta link apple-touch-startup-image con una media query que apunte a esa pantalla. No hay respaldo genérico.
Eso significa que un conjunto adecuado son una docena o más de etiquetas link, y la lista cambia a medida que Apple lanza nuevos tamaños de pantalla, por lo que suele generarse en vez de escribirse a mano.
Una entrada del conjunto
<link
rel="apple-touch-startup-image"
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)"
href="/splash/iphone-12.png"
/>Repetida una vez por dispositivo y orientación de destino, cada una con su propia media query y una imagen de tamaño exacto.
Preguntas frecuentes sobre la pantalla de bienvenida de iOS
¿Qué es apple-touch-startup-image?
Una etiqueta link que define la pantalla de bienvenida que iOS muestra mientras se lanza una web app de la pantalla de inicio, antes de que la página se haya renderizado.
¿Por qué necesito tantas de ellas?
iOS hace coincidir una imagen exacta con la resolución y orientación de cada dispositivo mediante una media query, y no escalará una imagen para que encaje, así que cada dispositivo de destino necesita su propia entrada.
¿Necesito una pantalla de bienvenida en absoluto?
Solo si tu sitio se instala en la pantalla de inicio de iOS y quieres un lanzamiento con marca. Para un sitio web normal no hace nada, así que la mayoría de los sitios lo omiten.