apple-touch-startup-image (iOS-Splashscreens)
apple-touch-startup-image ist ein Link-Tag, das den Splashscreen setzt, den iOS zeigt, während eine Home-Bildschirm-Web-App startet. Anders als das Icon ist es nicht eine Datei: iOS will ein separates, exakt bemessenes Bild pro Geräteauflösung und -orientierung, jedes über eine Media-Query ausgewählt. Es ist umständlich genug, dass viele Websites es überspringen oder den ganzen Satz mit einem Tool generieren.
Ein Bild pro Gerät, per Media-Query gewählt
iOS skaliert kein einzelnes Splash-Bild passend. Es gleicht über exakte Gerätepixelmaße und -orientierung ab, sodass jedes Gerät seinen eigenen apple-touch-startup-image-Link mit einer Media-Query braucht, die diesen Bildschirm anvisiert. Es gibt keinen Sammel-Fallback.
Das bedeutet, dass ein ordentlicher Satz ein Dutzend oder mehr Link-Tags ist, und die Liste ändert sich, wenn Apple neue Bildschirmgrößen ausliefert, weshalb er meist generiert statt von Hand geschrieben wird.
Ein Eintrag aus dem Satz
<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"
/>Einmal pro Zielgerät und -orientierung wiederholt, jeweils mit eigener Media-Query und exakt bemessenem Bild.
FAQ zum iOS-Splashscreen
Was ist apple-touch-startup-image?
Ein Link-Tag, das den Splashscreen definiert, den iOS zeigt, während eine Home-Bildschirm-Web-App startet, bevor die Seite gerendert hat.
Warum brauche ich so viele davon?
iOS gleicht ein exaktes Bild an die Auflösung und Orientierung jedes Geräts per Media-Query ab und skaliert kein einzelnes Bild passend, sodass jedes Zielgerät seinen eigenen Eintrag braucht.
Brauche ich überhaupt einen Splashscreen?
Nur, wenn deine Website zum iOS-Home-Bildschirm installiert wird und du einen gebrandeten Start willst. Für eine normale Website bewirkt er nichts, sodass die meisten ihn überspringen.