Вёрстка: Мета-теги для адаптивной вёрстки

Решает задачу базовой настройки страницы под мобильные устройства: правильная ширина viewport, начальный масштаб, поддержка вырезов экрана, тёмной темы, цвета интерфейса браузера и отдельных настроек для iOS/PWA.

Не подходит как замена нормальной адаптивной вёрстке. Один meta viewport не исправит фиксированную ширину блока, таблицу шире экрана, огромное изображение без max-width или меню, которое не помещается на мобильном экране. Мета-теги только дают браузеру правильные правила отображения, а адаптивность всё равно делается через CSS.

Готовое решение

Базовый вариант для большинства сайтов:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Расширенный вариант для современных сайтов и PWA:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">

Если сайт устанавливается на главный экран iPhone/iPad как веб-приложение:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Название приложения">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Если на странице много артикулов, кодов, ID или длинных чисел, которые Safari на iOS ошибочно превращает в телефонные ссылки:

<meta name="format-detection" content="telephone=no">

Что делает meta viewport

viewport управляет логической областью просмотра страницы на мобильных устройствах. Без него мобильный браузер может отрисовать страницу в широком виртуальном окне, например около 980px, а потом уменьшить её до ширины экрана. Визуально сайт вроде помещается, но медиазапросы и адаптивная сетка работают не так, как ожидается.

Правильный базовый вариант:

<meta name="viewport" content="width=device-width, initial-scale=1">

• width=device-width: ширина viewport равна ширине устройства в CSS-пикселях.
• initial-scale=1: начальный масштаб страницы — 100%.

Как не надо делать

Старый вариант, который часто встречается в шаблонах:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Так лучше не делать. maximum-scale=1 и user-scalable=no пытаются запретить пользователю масштабировать страницу. Это плохо для доступности: людям со слабым зрением сложнее читать текст. Кроме того, современные мобильные браузеры могут игнорировать эти ограничения.

Нормальный сайт должен выдерживать масштабирование, а не запрещать его.

Полезные параметры viewport

width — задаёт ширину viewport. В адаптивной вёрстке почти всегда используется device-width.

initial-scale — задаёт начальный масштаб страницы. Обычно используется значение 1.

minimum-scale и maximum-scale — задают минимальный и максимальный масштаб. В обычных сайтах их лучше не указывать, чтобы не мешать пользователю увеличивать страницу.

user-scalable — управляет возможностью масштабирования. Значение no использовать не стоит, если нет очень жёсткой причины и отдельной проверки доступности.

viewport-fit=cover — разрешает странице занимать всю область экрана, включая зоны вокруг вырезов и скруглений на мобильных устройствах. Использовать вместе с CSS-переменными безопасной области.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Пример CSS для безопасных отступов:

.page {
	padding-left: max(16px, env(safe-area-inset-left));
	padding-right: max(16px, env(safe-area-inset-right));
	padding-bottom: max(16px, env(safe-area-inset-bottom));
}

interactive-widget — параметр для поведения страницы при появлении виртуальной клавиатуры. Может быть полезен для интерфейсов с формами, чатами и фиксированными нижними панелями.

<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">

Использовать осторожно: поведение нужно проверять на реальных мобильных браузерах, особенно если в интерфейсе есть фиксированные элементы.

Тёмная тема и цвет интерфейса браузера

color-scheme сообщает браузеру, какие цветовые схемы поддерживает страница. Это помогает браузеру корректнее отрисовывать встроенные элементы интерфейса: поля форм, скроллбары, системные элементы.

<meta name="color-scheme" content="light dark">

theme-color задаёт рекомендуемый цвет интерфейса браузера или установленного веб-приложения. Можно указать разные цвета для светлой и тёмной темы:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">

Это не критичный тег для адаптивности, но хорошая мелочь для мобильного UX. Если браузер не поддерживает параметр, он просто его проигнорирует.

Мета-теги для Apple устройств и PWA

Для обычного сайта эти теги не обязательны. Они нужны, когда сайт ведёт себя как веб-приложение и пользователь может добавить его на главный экран iPhone или iPad.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Название приложения">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

• apple-mobile-web-app-capable: включает standalone-режим для веб-приложения.
• apple-mobile-web-app-title: задаёт название иконки на домашнем экране.
• apple-mobile-web-app-status-bar-style: управляет видом статус-бара в standalone-режиме.

Важно: правильное имя тега — apple-mobile-web-app-capable. Вариант apple-mobile-web-app-capacity — ошибка.

Устаревшие теги

X-UA-Compatible — тег для старых версий Internet Explorer. На современных публичных сайтах обычно не нужен.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Оставлять есть смысл только в старых корпоративных проектах, где реально поддерживается Internet Explorer или старый intranet-контур. Для нового сайта тег можно не добавлять.

HandheldFriendly — исторический тег для старых мобильных браузеров, Palm, BlackBerry и похожих устройств. В современной адаптивной вёрстке он не нужен.

<meta name="HandheldFriendly" content="true">

Если проект не поддерживает древние устройства по отдельному требованию заказчика, этот тег лучше не использовать.

Пример использования в head

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

	<title>Название страницы</title>
	<meta name="description" content="Описание страницы">

	<meta name="color-scheme" content="light dark">
	<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
	<meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">

	<link rel="stylesheet" href="/assets/css/main.css">
</head>

Краевые случаи

• Если на странице есть блок шире экрана, viewport не спасёт от горизонтальной прокрутки. Нужно искать CSS-причину: фиксированную ширину, длинную строку, таблицу, iframe, изображение.
• Если используется viewport-fit=cover, важные элементы нельзя прижимать к краям без учёта env(safe-area-inset-*).
• Если сайт похож на приложение с нижней панелью и формами, отдельно проверяй поведение при открытии клавиатуры.
• Если отключить автоопределение телефонов через format-detection, настоящие номера нужно размечать вручную через <a href="tel:+79990000000">.

Безопасность и доступность

• Не запрещай масштабирование через user-scalable=no. Это ухудшает доступность.
• Проверяй сайт при увеличении масштаба хотя бы до 200%.
• Не полагайся на цвет статус-бара или браузерной панели как на единственный способ передать состояние интерфейса.
• Телефонные ссылки, email и внешние ссылки размечай явно, а не надейся на автоматическое распознавание браузером.

Производительность

Сами meta-теги почти не влияют на скорость загрузки. Но неправильный viewport может ухудшить пользовательский опыт: страница будет открываться мелкой, медиазапросы не сработают как задумано, появится горизонтальная прокрутка.

Для производительности важнее не сам viewport, а то, что идёт вместе с ним: адаптивные изображения, нормальные размеры шрифтов, отсутствие тяжёлых блоков за пределами экрана, корректная сетка и аккуратный CSS.

Совместимость

• viewport нужен практически всем современным адаптивным сайтам.
• viewport-fit=cover полезен для устройств с вырезами и скруглениями экрана.
• color-scheme можно использовать на современных сайтах со светлой и тёмной темой.
• theme-color работает как прогрессивное улучшение: где поддерживается — улучшит UX, где нет — будет проигнорирован.
• X-UA-Compatible и HandheldFriendly относятся к старому стеку и не нужны для новых проектов.

Тест и проверка

• Открой страницу в Chrome DevTools → Toggle device toolbar.
• Проверь ширины 320px, 375px, 390px, 430px, 768px.
• Убедись, что нет горизонтальной прокрутки.
• Проверь масштаб страницы 200%.
• На iPhone проверь страницу в Safari, особенно если используется viewport-fit=cover.
• Если есть формы, проверь поведение при открытии виртуальной клавиатуры.
• Если есть тёмная тема, проверь prefers-color-scheme и цвет интерфейса браузера.

Альтернативы и смежные решения

• CSS media queries: основной инструмент адаптивной вёрстки. Viewport только включает корректную базу для их работы.
• Container queries: удобны, когда компонент должен адаптироваться не к ширине экрана, а к ширине своего контейнера.
• Responsive images: srcset, sizes, picture помогают отдавать подходящие изображения под разные экраны.
• Manifest для PWA: если сайт устанавливается как приложение, мета-тегов мало — нужен ещё manifest.webmanifest, иконки и service worker.

Итог: для обычного современного сайта достаточно charset и базового viewport. Для более аккуратного мобильного UX можно добавить viewport-fit=cover, color-scheme и theme-color. Старые теги вроде X-UA-Compatible и HandheldFriendly лучше оставить в прошлом, если проект не требует поддержки древних браузеров.