Вы добавили meta viewport в шаблон, но на мобильном устройстве сайт всё равно отображается как уменьшенная копия десктопа. Или наоборот: часть страниц адаптивна, а часть — нет. Причина почти всегда в конфликте тегов, ошибках CSS или порядке загрузки. Разберём, почему браузер игнорирует meta viewport и как это исправить.
Что делает meta viewport
Meta viewport сообщает мобильному браузеру, как масштабировать страницу относительно ширины экрана. Без него мобильный браузер применяет ширину виртуального окна около 980 пикселей и уменьшает страницу, чтобы она поместилась на экране. Именно поэтому сайт без viewport выглядит как маленькая копия десктопа.
Типичный корректный тег:
<meta name="viewport" content="width=device-width, initial-scale=1">
Здесь width=device-width означает, что ширина страницы должна соответствовать ширине экрана устройства. initial-scale=1 задаёт начальный масштаб без увеличения.
Если тег есть, но не работает, значит браузер либо не видит его, либо видит другой тег, либо CSS переопределяет поведение. Разберём каждую причину отдельно.
Причина 1: несколько тегов viewport
Самая частая причина — на странице несколько тегов meta viewport. Это происходит, когда в шаблоне есть базовый viewport, и одновременно SEO-плагин, тема или сторонний скрипт добавляет свой. Браузеры обычно применяют последний или первый тег — поведение зависит от браузера, и предсказать его сложно.
Как найти проблему:
— откройте исходный код страницы на мобильном устройстве или через режим эмуляции;
— найдите все вхождения meta name="viewport";
— проверьте, нет ли тегов с разными значениями content;
— проверьте, не добавляет ли viewport скрипт или плагин.
Если тегов несколько, оставьте только один — тот, который соответствует вашей вёрстке. Остальные удалите из шаблона, плагина или скрипта.
Причина 2: тег добавлен не в head
Meta viewport должен находиться в секции head HTML-документа. Если тег добавлен в body, до закрытия head или через JavaScript после загрузки страницы, браузер может его проигнорировать или применить с задержкой.
Что проверить:
— тег находится внутри head;
— тег стоит до закрывающего head;
— тег не вставлен через JS после загрузки;
— тег не скрыт внутри условного комментария.
Некоторые CMS и конструкторы добавляют viewport через JavaScript. В этом случае браузер может применить его не сразу, и страница на мгновение отобразится в десктопном виде. Это не всегда критично, но лучше размещать тег статически в head.
Причина 3: ошибка в значении content
Даже одна опечатка в атрибуте content делает тег бесполезным. Типичные ошибки:
— width=devise-width вместо width=device-width;
— initial-scale=1.0.0 вместо initial-scale=1;
— content без кавычек или с неправильными кавычками;
— лишние пробелы внутри значения;
— использование запятой вместо точки с запятой;
— указание user-scalable=no, которое не поддерживается некоторыми браузерами.
Проверить значение можно через инструмент проверки meta viewport. Он покажет текущий тег, найдёт опечатки и подскажет, какие параметры указаны неверно. Если значение некорректно, браузер применит поведение по умолчанию — то есть десктопный масштаб.
Причина 4: CSS переопределяет поведение
Иногда meta viewport корректен, но CSS задаёт фиксированную ширину контейнера, из-за чего страница всё равно выглядит неадаптивно. Например:
— body или основной контейнер имеет width: 1200px;
— используется min-width вместо max-width;
— медиазапросы не срабатывают из-за неправильных брейкпоинтов;
— есть элементы с фиксированной шириной, выходящие за экран;
— используется position: fixed без адаптивных правок.
В этом случае meta viewport работает, но вёрстка не адаптируется. Проблема не в теге, а в CSS. Нужно проверить, как ведёт себя страница при ширине экрана 360, 390, 414 и 768 пикселей, и найти элементы, которые ломают layout.
Причина 5: страница отдаётся через прокси или CDN
Если сайт работает через CDN или обратный прокси, возможны две проблемы:
— прокси кэширует десктопную версию и отдаёт её мобильным пользователям;
— прокси удаляет или изменяет meta viewport при передаче.
Что проверить:
— отдаётся ли разный HTML для мобильных и десктопных User-Agent;
— кэшируется ли страница отдельно для мобильных;
— не модифицирует ли прокси теги head.
Если CDN настроен неправильно, он может отдавать десктопную версию мобильным пользователям. В этом случае meta viewport есть, но он не тот, который нужен.
Как проверить meta viewport
Пошаговая проверка:
— откройте страницу на реальном мобильном устройстве;
— проверьте исходный код через режим эмуляции в браузере;
— найдите все теги meta viewport;
— проверьте значение content на опечатки;
— убедитесь, что тег в head и не добавлен через JS;
— проверьте CSS на фиксированные ширины;
— проверьте, не отдаёт ли CDN другую версию.
Для быстрой проверки используйте проверка meta viewport — инструмент покажет текущий тег, найдёт конфликты и подскажет, что нужно исправить. Если нужно проверить сразу несколько параметров мобильной версии — viewport, редиректы, SSL — логично перейти к SEO-аудиту.
Как исправить
Порядок исправления:
— оставьте только один тег meta viewport;
— разместите его в head до закрывающего тега;
— используйте корректное значение width=device-width, initial-scale=1;
— уберите из content неподдерживаемые параметры;
— проверьте CSS на фиксированные ширины и добавьте медиазапросы;
— очистите кэш CDN, если он использовался;
— проверьте результат на реальном устройстве.
Частые ошибки при настройке viewport
— несколько тегов viewport на одной странице;
— тег добавлен через JavaScript после загрузки;
— опечатки в значении content;
— использование user-scalable=no, которое не рекомендуется;
— фиксированная ширина контейнера в CSS;
— отсутствие медиазапросов для мобильных;
— кэширование десктопной версии на CDN;
— игнорирование проверки на реальном устройстве.
FAQ
Почему сайт выглядит как десктопный, хотя viewport есть?
Скорее всего, на странице несколько тегов viewport, тег добавлен не в head, или в значении content есть опечатка. Проверьте исходный код и значение тега.
Можно ли использовать несколько тегов viewport?
Нет, это вызывает конфликт. Браузеры применяют разные теги по-разному, и предсказать результат сложно. Оставьте только один тег.
Нужен ли user-scalable=no?
Не рекомендуется. Этот параметр запрещает пользователю масштабировать страницу, что ухудшает доступность. Некоторые браузеры его игнорируют.
Что делать, если viewport корректен, но вёрстка не адаптивна?
Проблема в CSS. Проверьте фиксированные ширины, min-width и медиазапросы. Meta viewport не делает вёрстку адаптивной сам по себе.
Влияет ли viewport на SEO?
Да. Мобильная адаптивность — фактор ранжирования. Если сайт не адаптирован, это снижает позиции в мобильном поиске.
Может ли CDN ломать viewport?
Да, если CDN кэширует десктопную версию и отдаёт её мобильным пользователям или модифицирует head. Проверьте настройки кэширования и модификации HTML.
Как проверить viewport на реальном устройстве?
Откройте сайт на смартфоне или планшете и проверьте, как отображается страница. Также можно использовать режим эмуляции в браузере, но реальное устройство надёжнее.
Нужно ли указывать initial-scale=1?
Да, это рекомендуемое значение. Оно задаёт начальный масштаб без увеличения и соответствует стандартной практике.
Что делать, если часть страниц адаптивна, а часть — нет?
Проверьте, не отличается ли шаблон для этих страниц. Возможно, на части страниц другой head или добавлен отдельный viewport через плагин.
Можно ли задать viewport через JavaScript?
Технически можно, но не рекомендуется. Браузер может применить тег с задержкой, и страница на мгновение отобразится в десктопном виде. Лучше размещать тег статически в head.
