apple-touch-startup-image (Telas de Abertura do iOS)
apple-touch-startup-image é uma tag de link que define a tela de abertura que o iOS mostra enquanto um web app de tela inicial é lançado. Ao contrário do ícone, não é um único arquivo: o iOS quer uma imagem separada e com tamanho exato por resolução e orientação de dispositivo, cada uma selecionada com uma media query. É complicado o suficiente para que muitos sites o pulem ou gerem o conjunto inteiro com uma ferramenta.
Uma imagem por dispositivo, escolhida por media query
O iOS não redimensiona uma única imagem de abertura para caber. Ele faz a correspondência por dimensões exatas em pixels do dispositivo e orientação, então cada dispositivo precisa do seu próprio link apple-touch-startup-image com uma media query que mire nessa tela. Não há fallback abrangente.
Isso significa que um conjunto adequado são uma dúzia ou mais de tags de link, e a lista muda conforme a Apple lança novos tamanhos de tela, e é por isso que ele costuma ser gerado em vez de escrito à mão.
Uma entrada do 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 uma vez por dispositivo e orientação de destino, cada uma com sua própria media query e imagem de tamanho exato.
Perguntas frequentes sobre tela de abertura do iOS
O que é apple-touch-startup-image?
Uma tag de link que define a tela de abertura que o iOS mostra enquanto um web app de tela inicial está sendo lançado, antes de a página ter renderizado.
Por que preciso de tantas delas?
O iOS faz a correspondência de uma imagem exata para a resolução e orientação de cada dispositivo com uma media query, e não redimensiona uma única imagem para caber, então todo dispositivo de destino precisa da sua própria entrada.
Preciso de uma tela de abertura afinal?
Apenas se o seu site for instalado na tela inicial do iOS e você quiser um lançamento com a sua marca. Para um site comum, ela não faz nada, então a maioria dos sites a pula.