Метатег viewport — HTML-элемент в разделе <head>, который сообщает браузеру CSS-ширину и масштаб отображения страницы на конкретном устройстве. Без него мобильный браузер рендерит страницу в виртуальном окне ~980px и сжимает до размеров экрана — текст нечитаем, CSS media queries игнорируются.
По данным исследования MobiLoud (компании, специализирующейся на мобильных приложениях и web-to-app решениях) на начало 2026 года — около 62-64% мирового веб-трафика приходится на мобильные устройства. Страница без viewport теряет эту аудиторию на этапе рендера.
Что такое метатег viewport: определение и механизм работы
Viewport (видимая область, вьюпорт) — часть страницы, которую пользователь видит без прокрутки. Размер viewport варьируется в зависимости от устройства и размера окна браузера. CSS-единицы vw и vh отсчитываются именно от viewport: 1vw = 1% ширины видимой области.
Метатег viewport задаёт браузеру правила: какую ширину считать рабочей и в каком масштабе отображать страницу при загрузке. Без этой инструкции Safari iOS использует дефолтные 980px, Opera — 850px, Android WebKit — 800px. Браузер рендерит страницу в этом виртуальном окне и сжимает результат до физического экрана смартфона.
Стандартная строка, закрывающая 95% задач:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Viewport vs экран: чем отличается видимая область от страницы
Viewport — не весь экран, а только та его часть, которую пользователь видит без прокрутки. Страница может быть длиннее и шире viewport — тогда появляется скролл. На смартфоне с экраном 390×844px viewport по ширине совпадает с шириной экрана, по высоте — с видимой зоной браузера без панели навигации.
CSS-единицы vw и vh пересчитываются при изменении размера окна. 100vw означает полную ширину viewport — если width=device-width не задан, 100vw рассчитывается от виртуальных 980px, а не от реального экрана. Адаптивные элементы на всю ширину без этого параметра работают некорректно.
Как браузер рендерит страницу без метатега viewport
Мобильный браузер без метатега viewport рендерит страницу в виртуальном окне ~980px и масштабирует результат до размера физического экрана — текст становится нечитаемым.
Разрыв между физическим и CSS-разрешением устраняет device pixel ratio (DPR): браузер делит физическое разрешение на этот коэффициент и получает CSS-размеры. Смартфон с 1080px физического разрешения и DPR 3 с точки зрения CSS имеет ширину 360px. CSS-правило @media (max-width: 768px) сработает — но только если задан width=device-width. Без него браузер считает ширину viewport 980px, и media queries работают вхолостую.
Стандартная строка и все параметры метатега viewport
Стандартная строка для 95% сайтов:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<!-- width=device-width: CSS-ширина viewport = CSS-ширине устройства -->
<!-- initial-scale=1: масштаб 1:1 при загрузке, без zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Заголовок страницы</title>
</head>
</html>
Полный список атрибутов с рекомендациями:
| Атрибут | Допустимые значения | Рекомендация | Нарушает WCAG 1.4.4? |
|---|---|---|---|
width | device-width / число 1–10000px | device-width | нет |
height | device-height / число | обычно не нужен | нет |
initial-scale | 0.0–10.0 | 1 | нет |
user-scalable | yes / no | yes (не трогать) | ДА при no |
minimum-scale | 0.0–10.0 | не использовать | нет* |
maximum-scale | 0.0–10.0 | ≥ 2 или не указывать | ДА при < 2 |
viewport-fit | auto / contain / cover | auto (по умолчанию) | нет |
interactive-widget | resizes-visual / resizes-content / overlays-content | resizes-visual (по умолч.) | нет |
*minimum-scale ниже 1 мешает пользователю уменьшить страницу.
width=device-width — почему CSS media queries не работают без этого параметра
width=device-width устанавливает CSS-ширину viewport равной CSS-ширине устройства — только тогда @media (max-width: 768px) сработает на реальном смартфоне, а не на виртуальных 980px.
Цепочка: width=device-width → браузер устанавливает CSS-ширину viewport = CSS-ширине устройства → media queries проверяют эту ширину → брейкпоинты срабатывают корректно. Условие: адаптивный CSS с правильными брейкпоинтами должен присутствовать.
device-width — выбор для всех адаптивных сайтов. Фиксированное значение (width=980) допустимо только для legacy-проектов без адаптивной вёрстки — страница с width=980 вызовет горизонтальный скролл на экране 375px. device-width адаптируется к каждому устройству: iPhone 15 получит 393px, Pixel 8 — 412px, планшет — 768px.
initial-scale=1 — что происходит при других значениях
initial-scale=1 означает масштаб 1:1 при загрузке — браузер показывает страницу без увеличения или уменьшения.
При initial-scale=2 страница грузится двукратно увеличенной — пользователь сразу видит половину контента. При initial-scale=0.5 — уменьшенной. Оба варианта ломают UX без специального обоснования. На современных браузерах с корректным viewport задержка тапа 300ms не возникает — это актуально только для устаревших браузеров без поддержки мобильного viewport.
Параметры, нарушающие WCAG 1.4.4: user-scalable и maximum-scale
user-scalable=no и maximum-scale < 2 нарушают WCAG 1.4.4 (Resize Text, Level AA) — пользователи с нарушениями зрения теряют возможность увеличить текст. Проверочный инструмент W3C ACT Rule b4f0c3 классифицирует их как failed. Lighthouse и HTML-валидаторы выдают предупреждение.
| Настройка | Последствие | WCAG 1.4.4 | iOS 10+ |
|---|---|---|---|
user-scalable=no | полный запрет zoom | НАРУШЕНИЕ | игнорируется |
maximum-scale=1.0 | нет zoom | НАРУШЕНИЕ | игнорируется |
maximum-scale=yes | = 1.0 → нет zoom | НАРУШЕНИЕ | игнорируется |
maximum-scale=1.5 | частичный zoom | НАРУШЕНИЕ (< 2) | частично |
user-scalable=yes | полный zoom | ✅ соответствует | работает |
maximum-scale=3 | zoom до 300% | ✅ соответствует | работает |
user-scalable=no не работает на большинстве современных устройств: iOS 10+ (с 2016 года) игнорирует параметр сознательно — Apple приоритизировала доступность над контролем разработчика. Android Chrome позволяет принудительно включить zoom через системные настройки accessibility. Единственное допустимое исключение по HTML-спецификации — картографические приложения с собственной реализацией масштабирования.
Ловушка maximum-scale=yes: браузер интерпретирует yes как 1.0 — полный запрет zoom и нарушение WCAG 1.4.4. Многие разработчики пишут maximum-scale=yes в попытке «включить» масштабирование — и получают обратный эффект. Безопасные варианты: maximum-scale=2 (минимально допустимо по WCAG), maximum-scale=3 (с запасом), либо не указывать maximum-scale вообще.
initial-scale < 1 — технически допустимо, но в старых браузерах без width=device-width вызывает задержку 300ms на тап-события. Chrome 32+ (2014) устраняет её при наличии width=device-width.
W3C документирует это явно: тест-кейсы ACT Rule b4f0c3 содержат примеры passed и failed конфигураций.
viewport-fit и interactive-widget: только для PWA и полноэкранных приложений
viewport-fit=cover позволяет контенту занять весь экран, включая вырез Dynamic Island на iPhone 14+ — но без CSS safe area переменных интерфейс перекроется системными элементами.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
/* Обязательно при viewport-fit=cover */
.header { padding-top: env(safe-area-inset-top); }
.footer { padding-bottom: env(safe-area-inset-bottom); }
.content { padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); }
Без env(safe-area-inset-*) кнопки и текст окажутся под «чёлкой» или Dynamic Island. Используйте viewport-fit=cover только при разработке PWA или полноэкранных веб-приложений — обычному сайту это не нужно.
interactive-widget управляет поведением viewport при появлении виртуальной клавиатуры (актуально для форм, чатов): resizes-content — layout перестраивается, высота страницы уменьшается; overlays-content — клавиатура перекрывает контент, viewport не меняется; resizes-visual — пересчитывается только визуальный viewport (поведение по умолчанию в Chrome). Для Safari поведение может отличаться.
Какой набор параметров viewport выбрать: решение по типу сайта
Выбор параметров зависит от типа проекта. Стандартная строка подходит для большинства — ниже матрица для edge cases:
| Тип сайта / приложения | Рекомендуемые параметры | Что не добавлять |
|---|---|---|
| Обычный сайт, лендинг, блог | width=device-width, initial-scale=1 | user-scalable, maximum-scale, viewport-fit |
| Интернет-магазин | width=device-width, initial-scale=1 | user-scalable=no — особенно на страницах каталога |
| PWA / полноэкранное приложение | width=device-width, initial-scale=1, viewport-fit=cover | — |
| Картографическое приложение | width=device-width, initial-scale=1, user-scalable=no | Единственный допустимый случай user-scalable=no |
| Legacy-сайт без адаптивной вёрстки | width=980 (или реальная ширина макета) | device-width — сломает layout |
| Форма / чат с виртуальной клавиатурой | width=device-width, initial-scale=1, interactive-widget=resizes-content | — |
Legacy-сайт с width=device-width без адаптивного CSS получит контент, вылезающий за экран. Ставить device-width без соответствующего CSS — хуже, чем оставить дефолт.
Что метатег viewport НЕ делает: распространённые заблуждения
Метатег viewport управляет только шириной CSS-viewport и начальным масштабом. Всё остальное — за пределами его компетенции.
Viewport не делает:
- Сайт адаптивным — для этого нужны CSS media queries и гибкий макет. Без них страница с viewport отобразится некорректно.
- Влияет на скорость загрузки — он не меняет приоритет ресурсов и не сжимает изображения.
- Управляет размером шрифтов — размеры задаются через CSS, не через viewport.
- Решает горизонтальный скролл от широких элементов — если
<img>или таблица шире экрана, viewport не поможет. Нуженmax-width: 100%в CSS. - Заменяет CSS media queries — без них viewport только устанавливает базовую ширину.
- Корректирует пропорции изображений — растянутые или обрезанные картинки исправляются через CSS, не через viewport.
Viewport — обязательный первый шаг Responsive Web Design (RWD), но не весь RWD. Он активирует media queries, а они адаптируют стили под конкретный экран.
Типичные проблемы viewport: симптом → причина → решение
Диагностировать проблему viewport проще по симптому на мобильном, чем по коду. Таблица закрывает 90% реальных случаев:
| Симптом на мобильном | Причина | Виновный параметр | Решение |
|---|---|---|---|
| Текст нечитаемо мелкий, нужно масштабировать пальцами | Браузер рендерит в 980px и сжимает | width отсутствует или зафиксирован | width=device-width |
| Горизонтальный скролл появился после добавления viewport | device-width без адаптивного CSS | width задан, CSS нет | Добавить max-width: 100% в CSS для широких элементов |
| CSS media queries не срабатывают на мобильном | Браузер видит viewport 980px, не реальную ширину | width не задан | width=device-width |
| Страница загружается увеличенной (видна левая половина) | initial-scale > 1 | initial-scale | initial-scale=1 |
| Пользователи не могут масштабировать текст | user-scalable=no или maximum-scale < 2 | user-scalable / maximum-scale | Убрать ограничения zoom |
| Контент залезает под Dynamic Island / вырез камеры | viewport-fit=cover без CSS safe area | viewport-fit + CSS | Добавить env(safe-area-inset-*) |
| Lighthouse выдаёт ошибку «Optimize viewport for mobile» | Тег отсутствует или некорректный width= | — | Добавить стандартную строку |
| Google Mobile-Friendly Test: ошибка | Нет тега viewport | — | Добавить стандартную строку |
Типичные ошибки в коде viewport
Ошибка 1 — Два тега viewport на странице:
<!-- Плагин добавил свой -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Разработчик добавил вручную -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Браузер применит первый найденный, второй проигнорирует — поведение варьируется между движками. Проверяйте через Ctrl+U: поиском viewport должна находиться ровно одна строка. Lighthouse выдаёт предупреждение о дублировании.
Ошибка 2 — Viewport в <body> вместо <head>:
<body>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ОШИБКА -->
</body>
Браузер уже начал рендер до обнаружения тега — поведение непредсказуемо. Тег обязан находиться в <head>.
Ошибка 3 — user-scalable=0 как синоним no:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
Браузеры интерпретируют 0 как no — нарушение WCAG 1.4.4, которое легко пропустить при ревью кода.
Ошибка 4 — maximum-scale=yes вместо «без ограничений»:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=yes">
yes интерпретируется браузером как 1.0 — полный запрет zoom. Это нарушение WCAG, замаскированное под корректный синтаксис.
Чеклист: правильно настроенный viewport
Viewport и SEO: Mobile-First Indexing в Google и Яндексе
Google индексирует сайты по мобильной версии (Mobile-First Indexing) — страница без viewport не получает статус mobile-friendly и проигрывает в ранжировании конкурентам с адаптивным дизайном. В 2024 году Google завершил переход на мобильную индексацию для всех сайтов — десктопная версия больше не является основной для краулинга.
| Параметр | Без viewport | Только viewport без адаптивного CSS | Viewport + адаптивный CSS |
|---|---|---|---|
| CSS-ширина, которую видит браузер | ~980px (дефолт) | CSS-ширина устройства | CSS-ширина устройства |
| CSS media queries | не срабатывают | срабатывают | срабатывают |
| Внешний вид на мобильном | сжатая копия десктопа | может некорректно отображаться | адаптированный макет |
| Статус mobile-friendly (Google) | не присваивается | может не присваиваться | присваивается |
| Lighthouse: «Optimize viewport for mobile» | ошибка | пройдено | пройдено |
| WCAG 1.4.4 (zoom) | зависит от параметров | соответствует при корректных параметрах | соответствует |
Официальная документация Google по Mobile-First Indexing: developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
Яндекс.Вебмастер и Google Search Console: что проверять
Яндекс также учитывает мобильную адаптацию при ранжировании. Инструмент «Проверка мобильных страниц» в Яндекс.Вебмастере анализирует наличие viewport, размер шрифтов, расстояние между кликабельными элементами, горизонтальный скролл — аналогично Google Mobile-Friendly Test.
Принципиальных отличий в обработке viewport между Google и Яндексом нет — оба ориентируются на один HTML-стандарт. Разница в дополнительных факторах ранжирования: Яндекс учитывает ИКС и поведенческие сигналы из Яндекс.Метрики. Для сайтов с российской аудиторией проверка через Яндекс.Вебмастер обязательна наравне с Google Search Console.
Как добавить viewport в WordPress, Tilda и 1С-Битрикс
Большинство современных тем WordPress и шаблонов Tilda добавляют viewport автоматически — но в устаревших или кастомных конфигурациях тег отсутствует или прописан некорректно.
Прежде чем лезть в код: откройте исходник страницы (Ctrl+U в браузере) и найдите <meta name="viewport" через поиск (Ctrl+F). Строка есть — смотрите значения content. Строки нет — добавляйте по инструкции ниже. Строк две — одну удаляйте.
WordPress
В большинстве актуальных тем viewport прописан в header.php или генерируется через хук wp_head().
Вариант 1 — через редактор темы (Внешний вид → Редактор тем → header.php):
Найдите тег <head> и убедитесь, что внутри есть строка:
<meta name="viewport" content="width=device-width, initial-scale=1">
Если строки нет — добавьте после <meta charset="utf-8">.
Вариант 2 — через functions.php (без правки шаблона, рекомендуется для кастомных решений):
function custom_viewport_meta() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1">' . "\n";
}
add_action( 'wp_head', 'custom_viewport_meta', 1 );
Tilda
Tilda добавляет viewport автоматически во все проекты. Исключение — Zero Block с кастомным HTML: в нём viewport не наследуется из настроек проекта и требует ручной проверки через Ctrl+U.
При необходимости переопределить значение или добавить вручную:
- Настройки проекта (значок шестерёнки).
- Раздел «SEO» → поле «Код в HEAD».
- Добавить строку:
<meta name="viewport" content="width=device-width, initial-scale=1">
1С-Битрикс
Viewport прописывается в файле шаблона. При смене шаблона — добавить вручную.
Путь к файлу: bitrix/templates/[название_шаблона]/header.php (или .top.php в зависимости от структуры шаблона).
<!-- header.php шаблона 1С-Битрикс -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php $APPLICATION->ShowHead(); ?>
<?php $APPLICATION->ShowCSS(); ?>
После правок очистите кеш: Настройки → Управление модулями → Главный модуль → Очистить кеш. Без сброса кеша изменения могут не применяться.
Как проверить метатег viewport: Lighthouse 13, Google и Яндекс.Вебмастер
Три инструмента дают разный уровень диагностики. Начните с Google Mobile-Friendly Test — он даёт ответ за 10 секунд. Lighthouse нужен, если тест пройден, но мобильная версия всё равно выглядит некорректно.
Lighthouse 13: инсайт «Optimize viewport for mobile»
С выходом Lighthouse 13 аудит viewport перенесён из раздела best-practices в инсайт «Optimize viewport for mobile» — именно там проверяйте наличие и корректность тега.
Как запустить:
- Откройте DevTools в Chrome (
F12илиCtrl+Shift+I). - Перейдите на вкладку Lighthouse.
- Выберите категорию «Performance» или «Best Practices», устройство — Mobile.
- Нажмите «Analyze page load».
- В результатах найдите инсайт «Optimize viewport for mobile».
Lighthouse проверяет: наличие тега, атрибут name="viewport", атрибут content, значение width=. Если тег отсутствует или значение некорректно — инсайт выдаст предупреждение с описанием проблемы.
Google Mobile-Friendly Test и Яндекс.Вебмастер
Google Mobile-Friendly Test — вставьте URL и через несколько секунд получите статус mobile-friendly с перечнем ошибок. Тест проверяет viewport, размер шрифтов, расстояние между кликабельными элементами, горизонтальный скролл. Результат «Страница удобна для мобильных» означает, что viewport настроен корректно среди прочих условий.
- Добавьте сайт и подтвердите права.
- Инструменты → Проверка мобильных страниц.
- Введите URL страницы → получите список ошибок.
Итоги
- Viewport без адаптивного CSS не решает задачу — он активирует media queries, но layout перестраивает CSS. Одна строка в
<head>и ноль правок CSS не сделают сайт адаптивным. - Стандартная строка
width=device-width, initial-scale=1закрывает 95% сайтов — всё остальное только при конкретном сценарии: PWA, картографические приложения, формы с виртуальной клавиатурой. user-scalable=no— бессмысленно и вредно: iOS 10+ игнорирует, WCAG нарушает, Lighthouse ругается.
Проверьте ваш сайт прямо сейчас: search.google.com/test/mobile-friendly