Мета теги Apple

Они помогают улучшить отображение сайта в браузере Safari, настройку работы с веб-приложениями и взаимодействие с устройствами на iOS.

Основные мета-теги Apple
1. Добавление сайта на главный экран (Web App Mode)
Чтобы пользователи могли добавлять сайт на главный экран с интерфейсом как у приложения:
<meta name="apple-mobile-web-app-capable" content="yes">
Этот тег активирует полноэкранный режим веб-приложения, исключая элементы браузера (например, адресную строку).
2. Установка цветовой темы статус-бара
Можно задать цвет статус-бара для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Значения:
• default — стандартный вид статус-бара (белый текст на чёрном фоне).
• black — чёрный фон статус-бара.
• black-translucent — полупрозрачный чёрный статус-бар.

3. Иконка приложения для главного экрана
Чтобы настроить иконку для сайта, добавляем:
<link rel="apple-touch-icon" href="icon.png">
Можно указать несколько иконок разных размеров:
<link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120.png">

4. Тег для сплэш-экрана при загрузке веб-приложения
Чтобы пользователь видел загрузочный экран, пока приложение открывается:
<link rel="apple-touch-startup-image" href="splash.png">

5. Запрет автоматического масштабирования
Чтобы отключить автоматическое изменение масштаба страницы, можно использовать:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

6. Оптимизация заголовков и переходов
Тег для более плавного отображения шрифтов и стиля текста:
<meta name="format-detection" content="telephone=no">

Этот тег предотвращает автоматическое преобразование телефонных номеров в ссылки.

Зачем использовать мета-теги Apple?
• Улучшение пользовательского опыта для владельцев iOS-устройств.
• Добавление сайта на главный экран с функциональностью, схожей с нативным приложением.
• Брендирование сайта с помощью иконок и кастомного интерфейса.


#html | #полезности