Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.
Иконка сайта в iOS на экране закладок и домашнем экране.
<link rel="apple-touch-icon" href="/apple/icon.png">Иконки разных размеров указываются атрибутом 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">Тоже самое что и 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">Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color.
<link rel="mask-icon" href="/apple/desktop.svg" color="#00а0ff">При добавлении сайта на домашний экран в iOS задает имя иконки.
<meta name="apple-mobile-web-app-title" content="...">В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.
<meta name="apple-mobile-web-app-capable" content="yes">Задает стиль панели состояния при полноэкранном режиме.
<meta name="apple-mobile-web-app-status-bar-style" content="black">Может иметь следующее значение:
default |
Белый фон |
black |
Черный фон |
black-translucent |
Прозрачный фон и белый цвет иконок и шрифтов |
 default |
 black |
 black-translucent |
В iOS Safari выводит баннер с приложением в App Store.
<meta name="apple-itunes-app" content="app-id=xxxxxxxxx">
Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.
В iOS запрещает распознавать номера телефонов и адреса.
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
