Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.
Apple Touch Icon
Иконка сайта в iOS на экране закладок и домашнем экране.
Иконки разных размеров указываются атрибутом sizes :
Apple Touch Icon Precomposed
Тоже самое что и apple touch icon , но с наложенными эффектами в стиле iOS с закругленными углами и т.д.
Mask Icon
Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color .
Apple-Mobile-Web-App-Title
При добавлении сайта на домашний экран в iOS задает имя иконки.
Apple-Mobile-Web-App-Capable
В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.
Apple-Mobile-Web-App-Status-Bar-Style
Задает стиль панели состояния при полноэкранном режиме.
Может иметь следующее значение:
| default | Белый фон |
| black | Черный фон |
| black-translucent | Прозрачный фон и белый цвет иконок и шрифтов |
 default |
 black |
 black-translucent |
Apple-Itunes-App
В iOS Safari выводит баннер с приложением в App Store.
Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.
Format-Detection
В iOS запрещает распознавать номера телефонов и адреса.
В iOS есть опция сохранять веб сайты на рабочем столе в виде приложений, но для адаптации сайта нужно знать несколько моментов.
Во первых для возможности отображения сайта в полноэкранном режиме, необходимо в
иначе наш сайт-приложение при клике на иконку будет открываться в сафари как обычный сайт
Так же можем поменять цвет статусбара:
Кто уже верстал сайты под мобильные устройства знает про тег viewport:
Чтобы на рабочем столе отображалась нужная нам иконка а не скриншот сайта, так же задаем её в метатегах (желательно несколько размеров как в примере):
I know this question has been asked previously, just want to know if this is still the case in ios 10 (and ios 9).
According to the apple developer guidelines for web apps (found here), there are 3 choices for the status bar in a web app; default, black and black-translucent.
- Default results in a white status bar with black text,
- Black results in a black status bar with white text, and
- Black-translucent results in a transparent background with white text. Additionally, this status bar floats above your content, meaning you have to push your content down 20px in order to not have the content overlap with thte status bar text.
I’d really like to use the black-translucent status bar (as I think it looks more native), but the background of my page is a light grey. This makes the white text on this status bar very hard to read.
Put simply, I’d just like a transparent background with black text (essentially, default-translucent). Is this possible?