Зачем настраивать viewport meta-тег
Viewport meta-тег сообщает мобильному браузеру, как масштабировать страницу под экран устройства. Без этого тега смартфон отобразит сайт так, будто экран шириной 980px (значение по умолчанию в большинстве мобильных браузеров), и пользователь увидит крошечную десктопную версию, которую нужно масштабировать пальцами. Для поисковых систем это сигнал: сайт не адаптирован для мобильных.
Google считает корректный viewport meta-тег обязательным условием мобилопригодности. Lighthouse проверяет наличие тега в аудите SEO - если тега нет или он настроен неправильно, страница получает ошибку. При Mobile-First Indexing Google оценивает именно мобильную версию, и отсутствие viewport означает, что мобильная версия фактически сломана.
Яндекс также учитывает мобилопригодность как фактор ранжирования. В Яндекс Вебмастере можно проверить, считает ли Яндекс сайт мобилопригодным. Отсутствие viewport meta-тега - одна из причин, по которой страница может быть помечена как неадаптированная для мобильных.
По моему опыту, с viewport meta-тегом проблемы встречаются реже, чем с другими аспектами мобильной оптимизации - большинство современных CMS и тем добавляют его автоматически. Но ошибки в настройке тега, особенно запрет масштабирования, встречаются регулярно и могут стоить позиций.
Пошаговая инструкция
Шаг 1. Проверьте наличие viewport meta-тега
Откройте исходный код страницы (Ctrl+U в Chrome) и найдите в секции <head> строку с name="viewport". Правильный viewport meta-тег выглядит так:
<meta name="viewport" content="width=device-width, initial-scale=1">Эта строка говорит браузеру: ширина области просмотра равна ширине устройства, начальный масштаб - 100%. Мобильный браузер отображает страницу в реальном масштабе, без уменьшения.
Если тега нет - его нужно добавить. Если он есть, но содержит другие параметры - проверьте их по шагам ниже.
Быстрая проверка через Chrome DevTools: откройте страницу, нажмите F12, перейдите во вкладку Elements и выполните поиск (Ctrl+F) по «viewport». Тег должен быть в <head>.
Шаг 2. Разберитесь в параметрах тега
Viewport meta-тег принимает несколько параметров в атрибуте content. Разберём каждый:
- width=device-width - ширина области просмотра равна ширине экрана устройства. Это основной параметр, без которого адаптивная вёрстка не работает. На iPhone 14 ширина будет 390px, на Samsung Galaxy S23 - 360px, на iPad - 768px или 1024px в зависимости от ориентации.
- initial-scale=1 - начальный масштаб страницы 100%. Страница отображается без увеличения или уменьшения. Без этого параметра некоторые браузеры могут произвольно масштабировать страницу.
- maximum-scale - максимальный масштаб, до которого пользователь может увеличить страницу. Значение 1 запрещает увеличение. Не рекомендуется ограничивать.
- minimum-scale - минимальный масштаб. Обычно не нужен - браузер сам управляет минимальным масштабом.
- user-scalable - разрешено ли пользователю масштабировать страницу. Значение
noзапрещает зум. Категорически не рекомендуется.
Минимально необходимый набор - width=device-width, initial-scale=1. Всё остальное либо не нужно, либо вредно.
Шаг 3. Удалите запрет масштабирования (user-scalable=no)
Это самая распространённая ошибка в настройке viewport. Многие разработчики и темы CMS добавляют user-scalable=no или maximum-scale=1, чтобы «зафиксировать» масштаб страницы. На практике это создаёт серьёзные проблемы:
- Нарушение доступности. Люди с ослабленным зрением не могут увеличить текст или изображение. Это прямое нарушение рекомендаций WCAG 2.1 (критерий 1.4.4 - Resize Text). Google учитывает доступность как фактор качества.
- Ошибка в Lighthouse. Аудит «[user-scalable=»no»] is used in the viewport meta tag or the [maximum-scale] attribute is less than 5» - выдаётся как ошибка в категории Accessibility. Это снижает оценку доступности сайта.
- Плохой пользовательский опыт. Даже на хорошо свёрстанном сайте иногда нужно увеличить мелкий текст на изображении, разглядеть деталь на фото или прочитать таблицу. Запрет зума отнимает у пользователя эту возможность.
Если в вашем viewport есть user-scalable=no или maximum-scale=1 - удалите эти параметры. Итоговый тег должен выглядеть так:
<meta name="viewport" content="width=device-width, initial-scale=1">Если разработчик настаивает на запрете зума «чтобы вёрстка не ломалась» - проблема в вёрстке, а не в возможности масштабирования. Правильная адаптивная вёрстка работает корректно при любом масштабе.
Шаг 4. Добавьте тег в CMS
В зависимости от CMS viewport meta-тег добавляется по-разному:
WordPress. В большинстве тем viewport уже прописан в файле header.php. Проверьте: если тег отсутствует, добавьте его в <head> через файл header.php дочерней темы или через хук wp_head в functions.php:
add_action('wp_head', function() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1">' . "\n";
}, 1);Если тема уже добавляет viewport с ненужными параметрами - найдите это место в коде темы и исправьте. Не добавляйте второй viewport meta-тег: два тега с разными параметрами создают конфликт, и браузер может использовать любой из них.
Любая CMS или статический сайт. Найдите основной шаблон, содержащий <head>, и добавьте тег внутри. Тег должен быть на каждой странице сайта без исключений.
Шаг 5. Проверьте все страницы, а не только главную
Viewport meta-тег может присутствовать на главной странице, но отсутствовать на других шаблонах - если разные типы страниц используют разные заголовочные файлы. Проверьте:
- Главную страницу
- Страницы услуг
- Статьи блога
- Страницы категорий и архивов
- Страницу контактов
- 404-ю страницу
- Страницы, созданные плагинами (личный кабинет, корзина, оформление заказа)
Массовую проверку можно провести через Screaming Frog: просканируйте сайт и экспортируйте данные о meta-тегах viewport. Screaming Frog покажет, на каких страницах тег отсутствует или отличается от ожидаемого.
Шаг 6. Проверьте через инструменты
После добавления или исправления тега проверьте результат через несколько инструментов:
Google Lighthouse (Chrome DevTools). Запустите аудит в режиме Mobile. В категории SEO ищите «Viewport meta tag» - должен быть зелёный. В категории Accessibility - не должно быть ошибки про user-scalable=no.
Google PageSpeed Insights (pagespeed.web.dev). Введите URL и проверьте мобильную версию. Тест покажет, если viewport не настроен или содержит проблемные параметры.
Яндекс Вебмастер. Раздел «Диагностика» - «Проверка мобильных страниц». Яндекс покажет, считает ли он страницу мобилопригодной. Отсутствие viewport - одна из причин провала проверки.
Chrome DevTools вручную. Включите режим эмуляции мобильного устройства (Ctrl+Shift+M). Если viewport настроен правильно - страница отображается в реальном масштабе, текст читаемый, элементы не уменьшены. Если viewport отсутствует - вы увидите миниатюрную версию десктопного сайта.
Шаг 7. Убедитесь, что CSS media queries работают корректно
Viewport meta-тег и CSS media queries работают в связке. Media queries типа @media (max-width: 768px) срабатывают на основе значения viewport, а не физической ширины экрана. Без viewport meta-тега браузер считает ширину равной 980px, и media queries для мобильных не срабатывают.
Проверьте:
- Адаптивные стили применяются на мобильных устройствах
- Брейкпоинты (breakpoints) в CSS соответствуют реальным размерам устройств: 320px, 375px, 414px, 768px, 1024px
- При изменении ориентации устройства (портрет/альбом) стили корректно переключаются
Если после добавления viewport meta-тега вёрстка на мобильных «поехала» - это означает, что раньше сайт просто показывался как уменьшенная десктопная версия, а теперь браузер пытается применить реальный масштаб. Нужно дорабатывать CSS для мобильных разрешений.
Типичные ошибки
- user-scalable=no или maximum-scale=1. Самая частая ошибка. Запрет масштабирования ломает доступность, вызывает ошибки в Lighthouse и создаёт плохой опыт для пользователей с ослабленным зрением. Удалите эти параметры. Если maximum-scale нужен - ставьте значение не менее 5:
maximum-scale=5. - Фиксированная ширина вместо device-width. Конструкция
width=1024вместоwidth=device-widthжёстко задаёт ширину viewport в 1024px на любом устройстве. На смартфоне с шириной 375px это приведёт к уменьшению масштаба - страница будет мелкой и нечитаемой. Всегда используйтеdevice-width. - Два viewport meta-тега на одной странице. Иногда тема добавляет один тег, а плагин - другой. Браузер может использовать любой из них, и результат непредсказуем. Проверьте исходный код: viewport meta-тег должен быть ровно один.
- Viewport в body вместо head. Meta-тег viewport должен находиться в секции
<head>. Если он оказался в<body>- браузеры могут его проигнорировать. Проверьте расположение в HTML-структуре. - Пропуск initial-scale=1. Тег
<meta name="viewport" content="width=device-width">безinitial-scale=1может работать в большинстве браузеров, но некоторые старые версии могут неправильно определить начальный масштаб. Добавляйте оба параметра для максимальной совместимости. - Забытые отдельные шаблоны. Viewport есть на главной и в статьях, но отсутствует на 404-й странице, странице поиска или страницах, генерируемых плагинами. Каждая страница сайта должна содержать viewport meta-тег.
- Надежда на плагин, который «сам добавит». Плагины мобильной оптимизации могут добавлять viewport, но если тема уже добавляет свой - получите конфликт. Проверяйте результат в исходном коде, а не доверяйте описанию плагина.
Что проверить в итоге
- На каждой странице сайта в секции head присутствует ровно один viewport meta-тег
- Тег содержит
width=device-width, initial-scale=1- без дополнительных ограничивающих параметров - Нет параметров user-scalable=no и maximum-scale=1 - масштабирование разрешено
- Lighthouse (Mobile) в категории SEO не показывает ошибку «Viewport meta tag»
- Lighthouse (Mobile) в категории Accessibility не показывает ошибку про user-scalable
- В Яндекс Вебмастере страницы не помечены как неадаптированные для мобильных
- На мобильном устройстве страница отображается в реальном масштабе - текст читается без масштабирования
- CSS media queries для мобильных разрешений срабатывают корректно
- Проверены все типы страниц: главная, услуги, статьи, категории, 404, страницы плагинов
- Пользователь может увеличить масштаб страницы пальцами на мобильном устройстве
