Главная → Все проверки → Мобильный viewport
Мобильный viewport: что проверяется
Viewport — настройка, благодаря которой сайт подстраивается под экран телефона. Без неё мобильный посетитель видит крошечную копию компьютерной версии.
Почему это важно
Без правильного viewport мобильный посетитель видит не адаптированную версию сайта, а уменьшенную копию десктопной: текст размером с шрифт на упаковке лекарства, который приходится увеличивать двумя пальцами. Первое впечатление испорчено сразу. Человек закрывает вкладку раньше, чем понимает, что попал на нужную страницу. Типичных причин две. Старый шаблон, свёрстанный под десктоп ещё до перехода на адаптивный дизайн, и потерянный при копировании тега атрибут initial-scale, без которого браузер не понимает, что страницу нужно вписать в ширину экрана. Отдельная ошибка: запрет масштабирования — не столько техническая проблема, сколько нарушение доступности для людей, которым нужно увеличить текст. На ранжирование сайта viewport напрямую не влияет, но исправляется правкой одной строки в HTML-коде. Проверяется только сам мета-тег: есть ли он, задана ли ширина по устройству, стоит ли initial-scale и не запрещено ли масштабирование. Удобство вёрстки на телефоне это отдельная тема, здесь она не оценивается.
Откуда взялись требования
Проверка из аудита Lighthouse. Отсутствие viewport ломает мобильную вёрстку, запрет зума нарушает доступность. В прямые факторы ранжирования не входит. Первоисточник ↗
Категория проверки: Мобильная версия. Вес в оценке: 5/10.
Какие результаты возможны
Ширина страницы задана по экрану телефона
Ширина берётся от экрана, зум не запрещён.
Страница не подстраивается под телефон
Сейчас у страницы нет рабочего мета-тега viewport, который задаёт ширину под экран телефона, поэтому телефон рисует уменьшенную копию компьютерной версии. Добавьте в <head> строку <meta name="viewport" content="width=device-width, initial-scale=1">. Правка занимает одну строку.
Ширина страницы не привязана к экрану
Замените мета-тег в <head> на <meta name="viewport" content="width=device-width, initial-scale=1">. Тогда ширина будет браться от экрана телефона.
Сайт запрещает увеличивать страницу пальцами
Уберите из мета-тега viewport запрет зума: атрибуты user-scalable=no и maximum-scale. Оставьте width=device-width, initial-scale=1, и посетитель со слабым зрением увеличит текст двумя пальцами.
Не задан начальный масштаб страницы
Допишите в мета-тег viewport значение initial-scale=1, чтобы страница открывалась в масштабе 1:1. Без него браузер сам выберет, с какого масштаба открыть страницу.
Кто исправляет
Чинить обычно достаётся разработчику.
Частые вопросы: мобильный viewport
Влияет ли viewport напрямую на позиции сайта в поиске?
Нет, эта проверка построена на аудите Lighthouse и оценивает удобство использования сайта, а не факторы ранжирования напрямую. Но без рабочего viewport мобильная версия страницы выглядит как сжатая копия десктопной, и посетитель с телефона уходит раньше, чем успевает прочитать хотя бы заголовок.
Почему нельзя просто запретить пользователю зум на странице?
Запрет масштабирования через атрибуты user-scalable=no или maximum-scale=1 нарушает доступность: люди с ослабленным зрением физически не могут увеличить текст, если браузер это жёстко блокирует. Проверка помечает такую настройку отдельным исходом, потому что технически viewport на странице есть, а пользоваться страницей всё равно неудобно.
Почему без initial-scale страница на телефоне выглядит не так?
Initial-scale задаёт исходный масштаб страницы при первой загрузке на экране телефона, и без него ширина страницы может не совпадать с шириной устройства. Браузер тогда отрисовывает страницу в масштабе, рассчитанном на десктоп, и посетителю снова приходится вручную растягивать экран, чтобы увидеть контент нормального размера.
Посмотреть весь список проблем страницы
Один адрес, 52 проверки, оценка от 0 до 100 и объяснение каждой находки простыми словами. Бесплатно, без регистрации.