Мета-теги HTML для Apple Safari

Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.

Иконка сайта в iOS на экране закладок и домашнем экране.

<link rel="apple-touch-icon" href="/apple/icon.png">
HTML

Иконки разных размеров указываются атрибутом sizes:

<link rel="apple-touch-icon" sizes="57x57" href="/apple/icon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple/icon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple/icon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple/icon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple/icon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple/icon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple/icon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple/icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple/icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple/icon-180.png">
HTML

Тоже самое что и apple touch icon, но с наложенными эффектами в стиле iOS с закругленными углами и т.д.

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple/icon-precomposed-57.png">
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple/icon-precomposed-60.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple/icon-precomposed-72.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple/icon-precomposed-76.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple/icon-precomposed-114.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple/icon-precomposed-120.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple/icon-precomposed-144.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple/icon-precomposed-152.png">
<link rel="apple-touch-icon-precomposed" sizes="167x167" href="/apple/icon-precomposed-167.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple/icon-precomposed-180.png">
HTML

Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color.

<link rel="mask-icon" href="/apple/desktop.svg" color="#00а0ff">
HTML

При добавлении сайта на домашний экран в iOS задает имя иконки.

<meta name="apple-mobile-web-app-title" content="...">
HTML

В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.

<meta name="apple-mobile-web-app-capable" content="yes">
HTML

Задает стиль панели состояния при полноэкранном режиме.

<meta name="apple-mobile-web-app-status-bar-style" content="black">
HTML

Может иметь следующее значение:

default Белый фон
black Черный фон
black-translucent Прозрачный фон и белый цвет иконок и шрифтов
apple-mobile-web-app-status-bar-style - defaultdefault apple-mobile-web-app-status-bar-style - blackblack apple-mobile-web-app-status-bar-style - black-translucentblack-translucent

В iOS Safari выводит баннер с приложением в App Store.

<meta name="apple-itunes-app" content="app-id=xxxxxxxxx">
HTML

Баннер приложения в App Store.

Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.

В iOS запрещает распознавать номера телефонов и адреса.

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
HTML
28.03.2018, обновлено 28.10.2019
8637
Предыдущая запись Описание мета-тегов

Комментарии

, чтобы добавить комментарий.

Другие публикации

Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
34236
+14
Генерация QR-кода в PHP
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой...
32167
+11
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
9763
+4
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
28542
+6
Настройка плеера YouTube
Список параметров для настройки функций плеера YouTube, полное описание в документации на developers.google.com.
18828
+6
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
10498
+2