Зачем проверять адаптивность страниц
Более 60% трафика на большинстве сайтов приходит с мобильных устройств. Если страница некорректно отображается на смартфоне — мелкий текст, горизонтальная прокрутка, наложение элементов — пользователь уходит. Поисковые системы это учитывают: Google перешёл на Mobile-First Indexing, то есть индексирует и оценивает именно мобильную версию сайта. Яндекс также учитывает мобилопригодность как фактор ранжирования.
Mobile-First Indexing означает, что Google использует мобильную версию страницы как основную для индексации и ранжирования. Если десктопная версия выглядит идеально, но мобильная сломана — Google будет ранжировать сайт по сломанной мобильной версии. Это касается всех сайтов без исключений: Google полностью завершил переход на Mobile-First Indexing.
Яндекс в своих рекомендациях для вебмастеров указывает, что сайт должен корректно отображаться на мобильных устройствах. В Яндекс Вебмастере есть отдельный раздел проверки мобилопригодности, а в результатах поиска сайты с проблемами мобильной версии могут получить сниженные позиции.
По моему опыту, адаптивность — это тот пункт, который часто считают решённым, но при детальной проверке на нём проваливаются. Тема работает адаптивно «в целом», но отдельные страницы содержат таблицы, которые ломают вёрстку, или элементы с фиксированной шириной, которые вызывают горизонтальную прокрутку.
Пошаговая инструкция
Шаг 1. Проверьте viewport meta-тег
Viewport meta-тег — обязательный элемент для адаптивного сайта. Он сообщает браузеру, как масштабировать страницу на мобильном устройстве. Проверьте, что в <head> каждой страницы присутствует:
<meta name="viewport" content="width=device-width, initial-scale=1">Без этого тега мобильный браузер покажет страницу в десктопном масштабе — мелкую и нечитаемую. Пользователю придётся масштабировать вручную, что сразу создаёт негативный опыт.
Распространённая ошибка — добавление maximum-scale=1, user-scalable=no. Это запрещает пользователю увеличивать масштаб страницы. Google считает это проблемой доступности. Не блокируйте зум — оставьте пользователю возможность увеличить мелкие элементы.
Шаг 2. Проверьте через Chrome DevTools
Chrome DevTools — основной инструмент для проверки адаптивности. Откройте страницу в Chrome, нажмите F12 (или Ctrl+Shift+I), затем кликните на иконку устройства (Toggle Device Toolbar) или нажмите Ctrl+Shift+M. Проверьте страницу на нескольких разрешениях:
- 320px — минимальная ширина, старые iPhone SE, бюджетные смартфоны. Если работает на 320px — работает везде.
- 375px — стандартная ширина большинства современных смартфонов (iPhone 12/13/14, Samsung Galaxy).
- 414px — крупные смартфоны (iPhone Plus/Max модели).
- 768px — планшеты в портретной ориентации (iPad).
- 1024px — планшеты в альбомной ориентации, маленькие ноутбуки.
На каждом разрешении проверяйте: нет ли горизонтальной прокрутки, читается ли текст, не наложились ли элементы друг на друга, доступны ли кнопки и ссылки, не скрылся ли важный контент.
Шаг 3. Проверьте через Google Mobile-Friendly Test
Инструмент Google Mobile-Friendly Test (search.google.com/test/mobile-friendly) анализирует страницу и показывает, считает ли Google её мобилопригодной. Введите URL и дождитесь результата. Инструмент покажет:
- Общий вердикт: «Страница оптимизирована для мобильных» или список проблем
- Скриншот страницы, как её видит Googlebot
- Конкретные ошибки: мелкий текст, элементы слишком близко друг к другу, контент шире экрана
Проверьте не только главную страницу, но и страницы разных типов: статью блога, страницу услуги, карточку товара, страницу категории. Проблемы адаптивности часто возникают на конкретных шаблонах, а не на всём сайте.
Шаг 4. Проверьте в Яндекс Вебмастере
Яндекс Вебмастер показывает проблемы мобилопригодности в разделе «Диагностика» → «Проверка мобильных страниц». Яндекс проверяет сайт по своим критериям и может выявить проблемы, которые Google не отмечает (и наоборот). Обратите внимание на:
- Список страниц с проблемами мобильной версии
- Типы ошибок: мелкий шрифт, элементы вне области просмотра, контент не помещается в экран
- Рекомендации по исправлению
Для сайтов, ориентированных на российский рынок, проверка в Яндекс Вебмастере приоритетнее: именно Яндекс является основной поисковой системой для большинства коммерческих сайтов в РФ.
Шаг 5. Найдите и исправьте типичные проблемы
Большинство проблем адаптивности сводятся к нескольким типовым ситуациям. Вот основные и способы их решения:
Горизонтальная прокрутка
Самая распространённая проблема. Возникает, когда какой-то элемент шире экрана. Частые причины:
- Таблицы с фиксированной шириной. Решение: оберните таблицу в контейнер с
overflow-x: auto, чтобы таблица прокручивалась внутри контейнера, а не растягивала страницу. - Изображения без max-width. Решение: добавьте в CSS правило
img { max-width: 100%; height: auto; }— изображения будут масштабироваться под ширину контейнера. - Блоки с фиксированной шириной в пикселях. Решение: замените
width: 800pxнаmax-width: 100%или используйте процентные значения. - Iframe (видео, карты) без адаптивной обёртки. Решение: оберните iframe в контейнер с
position: relative; padding-bottom: 56.25%; height: 0;, а iframe задайтеposition: absolute; width: 100%; height: 100%;.
Мелкий текст
Google считает текст мелким, если размер шрифта менее 16px на мобильных. Решение:
- Базовый размер шрифта для body — не менее 16px
- Межстрочный интервал (line-height) — не менее 1.4-1.5
- Не уменьшайте шрифт в мобильных медиазапросах ниже 14px даже для вторичного текста
Наложение элементов
Элементы с position: absolute или position: fixed могут накладываться на контент на узких экранах. Проверьте:
- Фиксированные шапки и меню не перекрывают контент при прокрутке
- Всплывающие виджеты (чат, callback, cookie-баннер) не закрывают кнопки и ссылки
- Боковые панели корректно скрываются или перестраиваются на мобильных
Скрытый контент
Контент, скрытый на мобильных через display: none, не индексируется Google при Mobile-First Indexing. Если вы скрываете целые разделы текста, таблицы или блоки на мобильных — этот контент может выпасть из индекса. Решение: не скрывайте важный контент. Если блок не помещается — перестройте его под мобильную версию, а не прячьте.
Шаг 6. Проверьте интерактивные элементы
На мобильных устройствах нет наведения мыши (hover). Все элементы управления активируются касанием. Проверьте:
- Размер кликабельных элементов. Кнопки и ссылки должны иметь минимальный размер 48×48 пикселей (рекомендация Google). Мелкие ссылки, расположенные рядом — пользователь промахивается и нажимает не туда.
- Расстояние между кликабельными элементами. Между соседними ссылками или кнопками должно быть достаточно пространства, чтобы пользователь мог точно нажать нужный элемент.
- Формы. Поля ввода должны быть достаточно крупными, клавиатура не должна перекрывать кнопку отправки. Проверьте, что тип поля указан корректно:
type="tel"для телефона,type="email"для email — на мобильных это вызывает соответствующую клавиатуру. - Меню. Навигационное меню на мобильных должно быть доступным и раскрывающимся. Подпункты меню не должны скрываться: пользователь должен иметь возможность перейти в любой подраздел.
Шаг 7. Проверьте скорость загрузки на мобильных
Адаптивность — это не только правильная вёрстка, но и скорость загрузки. Мобильные устройства часто работают на медленном соединении (3G, нестабильный Wi-Fi). Проверьте PageSpeed Insights (pagespeed.web.dev) для мобильной версии:
- Оценка Performance — желательно выше 70
- Largest Contentful Paint — основной контент загружается за 2.5 секунды или быстрее
- Cumulative Layout Shift — элементы не смещаются во время загрузки
Крупные изображения, не оптимизированные для мобильных, — частая причина медленной загрузки. Используйте адаптивные изображения (атрибут srcset) или CDN с автоматической оптимизацией размера.
Типичные ошибки
- Проверка только главной страницы. Главная адаптивна, а статья блога с таблицей или страница с калькулятором — нет. Проверяйте все типы страниц: главную, категории, статьи, товары, формы, лендинги.
- Проверка только в одном браузере. Chrome DevTools не покажет проблемы, специфичные для Safari на iOS. Если есть возможность — тестируйте на реальных устройствах: iPhone (Safari), Android (Chrome). Минимум — проверьте в BrowserStack или аналогичном сервисе.
- Запрет масштабирования. Атрибут
user-scalable=noилиmaximum-scale=1в viewport meta-теге. Это ограничивает пользователей с плохим зрением и нарушает рекомендации по доступности. Google может расценить это как проблему. - Скрытие контента вместо адаптации. Целые блоки спрятаны на мобильных через
display: none. Пользователь видит неполную страницу, Google при Mobile-First Indexing может не проиндексировать скрытый контент. Перестраивайте блоки, а не прячьте их. - Фиксированные всплывающие элементы, перекрывающие контент. Pop-up на весь экран, баннер cookie, который нельзя закрыть, виджет чата, закрывающий кнопку «Отправить». Google штрафует за навязчивые межстраничные элементы (intrusive interstitials) на мобильных.
- Разный контент на мобильной и десктопной версии. Если на мобильной версии меньше текста, нет каких-то блоков или ссылок — Google будет индексировать именно урезанную мобильную версию. Мобильная и десктопная версия должны содержать одинаковый контент.
Что проверить в итоге
- На всех страницах присутствует корректный viewport meta-тег без запрета масштабирования
- Все типы страниц проверены в Chrome DevTools на разрешениях 320px, 375px, 768px — нет горизонтальной прокрутки
- Google Mobile-Friendly Test показывает «Страница оптимизирована для мобильных» для всех основных шаблонов
- В Яндекс Вебмастере в разделе мобилопригодности нет критических ошибок
- Текст читается на мобильных без масштабирования — базовый шрифт не менее 16px
- Изображения масштабируются под ширину экрана (max-width: 100%)
- Таблицы обёрнуты в контейнер с горизонтальной прокруткой, а не ломают вёрстку
- Кликабельные элементы имеют размер не менее 48×48 пикселей и достаточно расстояния между собой
- Навигационное меню доступно на мобильных с раскрывающимися подпунктами
- Формы удобны для заполнения на мобильных — корректные типы полей, крупные элементы
- Нет навязчивых всплывающих элементов, перекрывающих контент на мобильных
- Мобильная и десктопная версия содержат одинаковый контент — важные блоки не скрыты через display: none
- PageSpeed Insights для мобильной версии показывает приемлемые метрики (Performance выше 70)
