apple-mobile-web-app-capable и мета-теги веб-приложений iOS
apple-mobile-web-app-capable — это мета-тег, который говорит iOS запускать ваш сайт в полный экран, без интерфейса Safari, когда он открыт с домашнего экрана. Он работает в паре с apple-mobile-web-app-status-bar-style для окраски строки состояния и apple-mobile-web-app-title для задания имени. Современная iOS всё чаще читает вместо этого режим отображения из манифеста, но эти теги остаются надёжным путём в Safari.
Заставить ярлык домашнего экрана вести себя как приложение
С apple-mobile-web-app-capable в значении yes сайт, открытый с домашнего экрана iOS, запускается в полный экран, автономно, без панели инструментов Safari. apple-mobile-web-app-status-bar-style затем управляет строкой состояния (default, black или black-translucent), а apple-mobile-web-app-title задаёт подпись под иконкой.
Они действуют, только когда сайт запущен с домашнего экрана. В обычной вкладке Safari они ничего не делают.
Мета-теги веб-приложения iOS
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="My App" />Частые вопросы о мета-тегах веб-приложений iOS
Что делает apple-mobile-web-app-capable?
Он заставляет сайт запускаться в полный экран, без интерфейса Safari, когда он открыт с домашнего экрана iOS. В обычной вкладке браузера эффекта нет.
Что black-translucent делает со строкой состояния?
Он позволяет вашей странице рисовать под строкой состояния, которая затем плывёт поверх вашего контента белым цветом. Вам нужно самим добавить верхний отступ, иначе строка состояния перекроет ваш заголовок.
Нужны ли эти теги при наличии манифеста?
Всё меньше. "display": "standalone" в манифесте обеспечивает полноэкранный запуск. Оставьте теги apple- для старой iOS и более тонкого контроля строки состояния.