Viewport Meta — это строка в секции <head>, которая сообщает браузеру мобильного устройства, какой ширины считать область просмотра и с каким начальным масштабом рисовать страницу. Что это значит на практике: без директивы width=device-width браузер берёт условную ширину рабочего стола около 980px и ужимает всю вёрстку под экран телефона.
Тег масштабирования влияет на две вещи сразу: читаемость без ручного зума и корректность адаптивной вёрстки через медиазапросы. Правильная запись выглядит как <meta name=viewport content=width=device-width, initial-scale=1> и разбирается в PageSpeed Insights, который помечает страницу без неё как непригодную для мобильных.
§ 01Зачем нужен
Мета-тег области просмотра переключает браузер из режима эмуляции десктопа в режим реального размера экрана. Без него медиазапросы CSS ориентируются на виртуальные 980px, поэтому правила вроде @media (max-width: 480px) просто не срабатывают на телефоне. Google Search Console помечает такие страницы в отчёте об удобстве на мобильных как проблемные. Для чего нужно: связать физическую ширину устройства с логической шириной, которую видит движок вёрстки.
§ 02Как устроен
Настройка вьюпорта собирается из атрибута name=viewport и списка директив в content. Ключевые из них:
width=device-width— приравнивает ширину области к ширине экрана в CSS-пикселях;initial-scale=1— задаёт стартовый масштаб 1:1;maximum-scaleиuser-scalable— ограничивают зум, но блокировать его не стоит из-за доступности.
Стандартная связка для адаптивного сайта — width=device-width, initial-scale=1.
отказы −31%, LCP −0.9 c — Интернет-магазин детских товаров на Shopify добавил в head тег с width=device-width и initial-scale=1 вместо фиксированной ширины 980px. Мобильные отказы упали с 58% до 27% за 4 недели, LCP снизился на 0.9 с. Замер через PSI и GA4 Engagement.
мобильный трафик +22% — B2B SaaS с блогом на WordPress прописал viewport meta на 340 статьях, где раньше шрифт требовал ручного зума. Органический мобильный трафик вырос на 22% за 3 месяца после переиндексации. Динамика по Ahrefs Site Explorer и Search Console.
§ 03Как настраивается
Строка ставится один раз в <head> каждой страницы, до подключения стилей. В связке с ней работают гибкие единицы: проценты, rem, vw и медиазапросы. Отличается от адаптивности тем, что сам по себе тег не делает вёрстку резиновой — он только задаёт систему координат, внутри которой CSS уже перестраивает блоки. В CMS вроде WordPress вьюпорт обычно прописан в шаблоне header.php темы.
§ 04Как проверить, что работает
Открой исходный код страницы через Ctrl+U и найди строку с name=viewport в шапке. Быстрая техническая проверка — PageSpeed Insights и режим устройства в DevTools Chrome: если при сужении окна ниже 480px блоки не перестраиваются, а лишь масштабируются целиком, директива отсутствует или задана неверно. Screaming Frog при сканировании собирает наличие тега по всем URL сразу, что удобно для проверки крупного сайта.