Записки HTML-верстальщика: полезные META-теги (ИСПРАВЛЕНО!)
Этот пост я хочу посвятить самым полезным (на моей практике) META-тегам, которые не каждый вебмастер/программист/верстальщик использует в своей работе, но отсутствие которых может повлиять на работу сайта в разных браузерах или на разных устройствах.
Итак:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
Очень популярный META-тег, который говорит нашему сайту получать ширину и высоту от размеров устройства, устанавливает ему масштаб равный 1 и не позволяющий пользователю увеличивать его (к примеру, растягивая пальцами на мобильном устройстве) - жизненно важный тег для адаптивных сайтов.
<meta name="HandheldFriendly" content="True"/>
Еще один META, который заставляет наш сайт быть адаптивным
<meta name="apple-mobile-web-app-capable" content="yes"/>
Этот тег позволяет нашему сайту корректно открываться в некоторых случаях на Apple-устройствах. Корректно, значит в полный экран.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
Фиксит верхнюю полоску статуса в iOS устройствах.
<meta http-equiv="imagetoolbar" content="no"/>
Убирает панель работы с картинками на некоторых устройствах
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>
META-теги, которые не разрешают мобильным устройствам по-своему воспринимать адреса и телефоны (к примеру, некоторые старые модели телефонов под управлением iOS любят добавлять черный цвет к номерам телефонов, без возможности их стилизации).
<meta http-equiv="cleartype" content="on"/>
Тег, который говорит мобильному IE отображать текст не так как хочет он, а так, как хотим мы (убирает ненужное (и временами влияющее кардинально на отображение сайта) сглаживание.
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Говорит ИЕ, чтобы он не вы**ывался и пытался показать всё, на что он способен (проще - использовал свою последнюю версию).
<meta http-equiv="msthemecompatible" content="no"/>
И снова IE. На этот раз, тег запрещает ему использовать нестандартные стили операционной системы, и заставляет его работать в стандартной теме.
<meta http-equiv="Cache-Control" content="no-cache"/>
Запрещает кешировать нашу страницу. Очень полезный тег для некоторых устройств, которые временами пытаются неправильно восстановить стили страницы из кеша. Особенно полезно для отладки на первоначальной стадии верстки.
<meta name="theme-color" content="#db5945">
Ну и, напоследок, новая фича от chrome браузера под мобильные, которая позволяет стилизовать полоску ввода URL-адреса в цвет, который максимально подходит стилистике Вашего сайта.