Проверка адаптивности сайта

Адаптивный сайт — это одна версия страниц, которая перестраивается под ширину экрана: на десктопе три колонки, на телефоне одна. Проверка адаптивности показывает, что видит человек, открывший сайт с телефона или планшета, и не ломается ли при этом верстка.

Statista оценивает долю смартфонов и планшетов в мировом трафике 2024 года выше 59% [1]. Мобильное отображение влияет и на позиции, и на заявки: Google оценивает сайт по мобильной версии, это называется mobile-first индексированием.

Что такое адаптивный дизайн и чем он отличается от мобильной версии

Адаптивная верстка использует медиазапросы: стили и структура блоков меняются в зависимости от разрешения экрана. Адрес при этом один, содержимое одно, поддерживать нужно один шаблон.

Отдельная мобильная версия на поддомене m. устроена иначе: это вторая копия сайта со своими адресами. От нее отрасль отказалась: содержать две копии дороже, а поисковики все равно смотрят на мобильную версию как на основную.

Есть еще резиновая верстка: блоки тянутся по ширине, но не перестраиваются. На широком экране она работает, на телефоне обычно дает горизонтальную прокрутку.

Семь признаков адаптивного сайта

1. Нет горизонтальной прокрутки. Ни на одной странице и ни при одном повороте экрана.
2. Текст читается без увеличения. Основной шрифт от 16 пикселей.
3. По кнопкам можно попасть пальцем. Кликабельная область от 44 пикселей, между соседними элементами есть зазор.
4. Изображения не выходят за экран и не утяжеляют страницу: телефон грузит уменьшенную версию, а не десктопную на два мегабайта.
5. Формы заполняются одной рукой. Поля во всю ширину, клавиатура открывается нужного типа.
6. Меню открывается и закрывается. Чаще всего ломается именно бургер-меню на планшетах.
7. Ничего не перекрывает содержимое. Всплывающие окна и плашки согласия на телефоне занимают экран целиком чаще, чем на десктопе.

Базовые способы проверки адаптивности в браузере

Chrome DevTools, режим устройства. Ctrl+Shift+M, дальше выбор модели или произвольного разрешения. Здесь же включается эмуляция медленной сети, и это важнее самой ширины: часть проблем мобильной версии видна только на медленном соединении.

Режим устройства вызывается сочетанием Ctrl+Shift+M. Модель выбирается из списка, рядом с ней — поле произвольной ширины и переключатель скорости сети

Инструменты разработчика в Firefox. Меню, «Дополнительные инструменты», «Адаптивный дизайн». Меняет ориентацию экрана и позволяет проверить работу сенсорных элементов.

Safari и Edge. У обоих есть встроенные эмуляторы: они показывают мобильную версию прямо в браузере.

Симуляторы Android Studio и Xcode. Нужны, когда важно поведение в конкретной версии системы, а не одна ширина экрана.

Свой телефон. Самый точный способ и единственный, который ловит кнопку «Отправить», спрятанную под клавиатурой. Эмулятор этого не показывает.

Официальные инструменты поисковых систем

Первая версия этой статьи вышла в апреле 2025 года и рекомендовала в том числе инструменты, которые к тому моменту уже были закрыты. Ниже собрано состояние на сентябрь 2026 года, проверенное по адресам.

Проверка мобильных страниц в Яндекс Вебмастере [2]. Работает, проверка постраничная: загружаете адрес и получаете ошибки отображения. Общая картина по сайту — в разделе «Диагностика».

Так выглядит пройденная проверка в Вебмастере: связь десктопной и мобильной версий, отсутствие горизонтальной прокрутки, читаемый текст и тег viewport

Google Mobile-Friendly Test закрыт. Вместе с ним закрыты отчет «Удобство для мобильных» в Search Console и API теста. Все три перестали работать 1 декабря 2023 года. Google объяснил это тем, что появились более сильные инструменты, и указал на Lighthouse [3]. Старый адрес теста сейчас перебрасывает на документацию Lighthouse.

Core Web Vitals в Search Console. Отчет о скорости остался и по-прежнему делится на мобильные и десктопные страницы. Закрыли измеритель, а не сам фактор: неудобный на телефоне сайт по-прежнему теряет позиции и портит поведенческие метрики.

Список страниц для проверки удобно взять из сканера сайта в engine.seointellect.ru [4]: он обходит сайт и отдает все найденные адреса, из которых выбирают по одной странице на шаблон.

Онлайн-сервисы, которые показывают, как выглядит сайт на разных устройствах

Эти сервисы показывают страницу сразу на наборе экранов и не требуют установки. Статусы проверены 4 сентября 2026 года.

I Love Adaptive [5]. Российский сервис, отдает скриншоты сайта на десятке разрешений одной страницей. Удобен, когда макет сдают заказчику.

Adaptivator [6]. Проверка верстки на разных разрешениях: видно, как ведут себя сетки, заголовки и медиаэлементы.

Am I Responsive [7]. Быстрый взгляд на четыре стандартных экрана сразу. Сервис переехал на новый адрес, старые ссылки на него ведут через перенаправление.

Screenfly [8]. Выбор устройства, ориентации и типа экрана. Годится для быстрой проверки отдельной страницы.

Screenfly держит список разрешений от телефонов до телевизоров. Страница открывается прямо в выбранном размере

MobileMoxie [9]. Тестирование с реальных мобильных IP, а не в эмуляторе. Полезен, когда мобильная выдача отличается от десктопной.

BrowserStack [10]. Эмуляция реальных устройств и браузеров. Платный, нужен там, где важна точность до модели телефона.

Responsinator и CrossBrowserTesting не открылись. Оба сервиса кочуют по подборкам до сих пор, но на проверке не ответили. Symby открывается только после входа в учетную запись. Проверьте сами, прежде чем закладывать их в регламент.

Комплексные системы анализа производительности

Lighthouse. Встроен в Chrome: правая кнопка, «Посмотреть код», вкладка Lighthouse. Дает отчет по производительности, доступности, SEO и лучшим практикам отдельно для мобильного профиля. Google указал на него вместо закрытого теста.

PageSpeed Insights [11]. Тот же Lighthouse в браузере и с полевыми данными Core Web Vitals по реальным посетителям. Полевые данные ценнее лабораторных: они показывают, как сайт ведет себя на настоящих телефонах и настоящих сетях.

GTmetrix [12] и WebPageTest [13]. Детальный разбор загрузки с выбором устройства, региона и скорости сети. Показывают, какие именно файлы тормозят страницу.

WebPageTest отвечает на три вопроса подряд: быстро ли, можно ли пользоваться, устойчив ли макет. Под каждым — список того, что именно замедлило страницу

Автоматические проверки в CI/CD. На больших проектах Lighthouse запускают при каждой сборке — так поломка адаптивности видна в день выкладки, а не через квартал.

Технологии ускоренной загрузки мобильных страниц

Яндекс Турбо-страницы отключены. Яндекс прекратил поддержку технологии [14]: со 2 апреля 2025 года Турбо-страницы перестали показываться в поиске, через два месяца их не осталось совсем. Адрес yandex.ru/turbo отдает 404. Если вам предлагают подключить Турбо для ускорения мобильной выдачи, собеседник читал прошлогоднюю статью.

AMP работает, но смысла в нем мало. В блок «Главные новости» Google теперь попадают и обычные страницы, AMP для этого не нужен. Для нового проекта заводить вторую версию страниц незачем: быстрая адаптивная верстка решает ту же задачу.

PWA. Сайт ведет себя как приложение: работает офлайн, ставится на домашний экран, шлет уведомления. Оправдан там, где люди возвращаются регулярно, — например, в личном кабинете сервиса у IT-интегратора.

Обычные способы ускорения. WebP, отложенная загрузка всего, кроме первого экрана, HTTP/3. Дают больше, чем AMP и PWA, и не требуют второй версии сайта.

Что делать, если сайт не прошел проверку на адаптивность

Первым делом проверяется тег viewport. Без него браузер телефона рисует страницу в десктопной ширине и уменьшает целиком, поэтому не работают ни медиазапросы, ни размеры шрифтов. В <head> должна стоять строка:

<meta name="viewport" content="width=device-width, initial-scale=1">

Наличие тега проверяет и Вебмастер: в отчете о мобильных страницах это отдельный пункт «Тег viewport указан». Если строки нет, остальные правки бессмысленны, пока она не появится.

Горизонтальная прокрутка. Почти всегда виноват один элемент с фиксированной шириной: таблица, изображение или блок с отступом в пикселях. Находится в DevTools за минуту, лечится тремя правилами: img, video { max-width: 100%; height: auto; }, * { box-sizing: border-box; } и заменой ширин в пикселях на проценты или rem. Таблицу шириной больше экрана не сжимают, а заворачивают в блок с overflow-x: auto — она получает свою прокрутку и не тянет за собой страницу.

Медленная загрузка. Начинают с изображений: перевод в WebP, атрибут loading="lazy" на все, кроме первого экрана, и проставленные width и height, чтобы страница не дергалась при подгрузке. Дальше идут сторонние скрипты: виджет чата, карты, счетчики аналитики. Их подключают отложенно, после отрисовки первого экрана.

Мелкие кнопки и текст. Базовый кегль ставится от 16 пикселей, кликабельная область — от 44 пикселей по каждой стороне, между соседними кнопками остается зазор, чтобы палец не попадал в две сразу. Это правка стилей для мобильного разрешения, работа на час.

Меню и фильтры не работают на касание. Выпадающие списки, рассчитанные на наведение мыши, на телефоне не раскрываются: события hover там нет. Меню переводят на нажатие, а проверяют на реальном устройстве — в эмуляторе мышь ведет себя не так, как палец.

Сайт не адаптивен в принципе. Если верстка фиксированная и ей десять лет, дешевле переделать шаблон, чем латать. Подключить готовый фреймворк вроде Bootstrap — рабочий путь для сайта без дизайнера.

Порядок правок такой: viewport, горизонтальная прокрутка, размеры кнопок и текста, скорость. Первые три возвращают сайту работоспособность на телефоне, скорость дорабатывается потом.

Как часто перепроверять адаптивность

Разово адаптивность не чинится: правки шаблона, новые баннеры и виджеты ломают ее регулярно, а замечают это через месяцы.

Рабочий минимум: PageSpeed Insights по трем страницам раз в квартал — главная, страница услуги или каталога и карточка — шаблоны разные и ломаются по-разному. Полный проход по семи признакам после каждого изменения шаблона. Проход с телефона после каждой правки формы заявки.

Список для прохода по семи признакам. Проверяется на телефоне, и невыполненного не должно остаться ни одного

Заодно проверьте, нет ли на сайте битых ссылок: на телефоне попадание в 404 раздражает сильнее, чем на десктопе, и человек чаще уходит совсем.

Частые вопросы

Источники

1. Statista. Share of website traffic coming from mobile devices, 2024
2. Яндекс Вебмастер. Проверка мобильных страниц
3. Google Search Central Blog. The Search Console mobile friendly testing tool (retired)
4. engine.seointellect.ru. Сканер сайта
5. I Love Adaptive
6. Adaptivator
7. Am I Responsive
8. Screenfly
9. MobileMoxie
10. BrowserStack. Responsive checker
11. Google. PageSpeed Insights
12. GTmetrix
13. WebPageTest
14. Блог Яндекс Вебмастера. Прекращение поддержки технологии Турбо