apple-touch-startup-image (экраны загрузки iOS)
apple-touch-startup-image — это тег <link>, который задаёт экран загрузки, показываемый iOS, пока запускается веб-приложение с домашнего экрана. В отличие от иконки, это не один файл: iOS хочет отдельное изображение точного размера под каждое разрешение и ориентацию устройства, каждое выбираемое медиазапросом. Это достаточно хлопотно, что многие сайты его пропускают или генерируют весь набор инструментом.
По одному изображению на устройство, выбираемому медиазапросом
iOS не масштабирует единственное изображение загрузки под размер. Она сопоставляет по точным пиксельным размерам устройства и ориентации, так что каждому устройству нужна своя ссылка apple-touch-startup-image с медиазапросом, нацеленным на этот экран. Универсального запасного варианта нет.
Это значит, что правильный набор — это дюжина или больше тегов <link>, и список меняется по мере того, как Apple выпускает новые размеры экранов, поэтому его обычно генерируют, а не пишут вручную.
Одна запись из набора
<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"
/>Повторяется по одному разу на каждое целевое устройство и ориентацию, каждая со своим медиазапросом и изображением точного размера.
Частые вопросы об экране загрузки iOS
Что такое apple-touch-startup-image?
Тег <link>, который определяет экран загрузки, показываемый iOS, пока запускается веб-приложение с домашнего экрана, до того как страница отрисуется.
Почему их нужно так много?
iOS сопоставляет точное изображение с разрешением и ориентацией каждого устройства через медиазапрос и не масштабирует одно изображение под размер, так что каждому целевому устройству нужна своя запись.
Нужен ли мне вообще экран загрузки?
Только если ваш сайт устанавливается на домашний экран iOS и вы хотите брендированный запуск. Обычному сайту он ничего не даёт, так что большинство сайтов его пропускают.