HTML/CSS

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

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

1

Apple Touch Icon

Иконка сайта в 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">
2

Apple Touch Icon Precomposed

Тоже самое что и 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">
3

Mask Icon

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

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

Apple-Mobile-Web-App-Title

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

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

Apple-Mobile-Web-App-Capable

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

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

Apple-Mobile-Web-App-Status-Bar-Style

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

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

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

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
7

Apple-Itunes-App

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

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

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

8

Format-Detection

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

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
28 марта 2018
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.