apple-touch-startup-image (écrans de démarrage iOS)
apple-touch-startup-image est une balise link qui définit l'écran de démarrage qu'iOS affiche pendant le lancement d'une application web d'écran d'accueil. Contrairement à l'icône, ce n'est pas un seul fichier : iOS veut une image distincte, exactement dimensionnée, par résolution et orientation d'appareil, chacune sélectionnée avec une media query. C'est assez fastidieux pour que beaucoup de sites la sautent ou génèrent tout l'ensemble avec un outil.
Une image par appareil, choisie par media query
iOS ne met pas à l'échelle une seule image de démarrage pour qu'elle s'adapte. Il fait correspondre les dimensions exactes en pixels de l'appareil et l'orientation, donc chaque appareil a besoin de sa propre balise link apple-touch-startup-image avec une media query qui cible cet écran. Il n'y a pas de repli fourre-tout.
Cela signifie qu'un ensemble correct représente une douzaine de balises link ou plus, et la liste change à mesure qu'Apple sort de nouvelles tailles d'écran, c'est pourquoi elle est généralement générée plutôt qu'écrite à la main.
Une entrée de l'ensemble
<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"
/>Répétée une fois par appareil et orientation ciblés, chacune avec sa propre media query et son image exactement dimensionnée.
FAQ sur l'écran de démarrage iOS
Qu'est-ce qu'apple-touch-startup-image ?
Une balise link qui définit l'écran de démarrage qu'iOS affiche pendant le lancement d'une application web d'écran d'accueil, avant que la page ne soit rendue.
Pourquoi m'en faut-il autant ?
iOS fait correspondre une image exacte à la résolution et à l'orientation de chaque appareil avec une media query, et ne met pas une seule image à l'échelle, donc chaque appareil ciblé a besoin de sa propre entrée.
Ai-je besoin d'un écran de démarrage du tout ?
Uniquement si votre site est installé sur l'écran d'accueil iOS et que vous voulez un lancement de marque. Pour un site web normal, il ne fait rien, donc la plupart des sites le sautent.