# Проверка мобильной версии сайта: чек-лист на 10 пунктов

Адрес: https://seo-audit-sajta.ru/proverki/mobilnaya-versiya/
Кратко: Как проверить мобильную версию сайта самому: viewport, адаптивность, размер текста и кнопок, формы, меню, скрытый контент, поведение посетителей в Метрике.

Выводы:
- Мобильную версию проверяют на настоящем телефоне, эмулятор помогает, но не заменяет
- Содержимое на телефоне должно совпадать с десктопом: поисковик оценивает именно мобильную версию
- Метрика с разбивкой по устройствам покажет, где мобильные посетители спотыкаются

Мобильная версия проходит проверку, если на телефоне страницу можно прочитать без увеличения, нажать на любую кнопку с первого раза, заполнить форму и найти ту же информацию, что и на компьютере. Google индексирует сайты по мобильной версии, а Яндекс учитывает удобство на телефоне, поэтому проблемы на маленьком экране бьют и по посетителям, и по поиску. Проверка занимает час: телефон, браузер с инструментами разработчика и отчёты Метрики.

Мобильность пересекается с удобством интерфейса, которое шире разобрано в обзоре [аудита юзабилити и скорости](https://seo-audit-sajta.ru/vidy-audita/yuzabiliti-i-skorost/). Скорость на телефоне — отдельный чек-лист про [Core Web Vitals](https://seo-audit-sajta.ru/proverki/skorost-core-web-vitals/).

## Подготовка

Возьмите один-два реальных телефона: обычный смартфон среднего размера и, если есть, устройство с маленьким экраном. На компьютере откройте инструменты разработчика в браузере и включите режим эмуляции устройств: там можно быстро переключать ширину экрана. Составьте список шаблонов для проверки: главная, раздел, карточка или услуга, статья, контакты, корзина или форма заявки.

## Чек-лист на 10 пунктов

1. **Метатег viewport.** В коде страницы должен быть тег, без которого телефон покажет уменьшенную копию десктопа:

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

2. **Нет горизонтальной прокрутки.** Проведите пальцем влево-вправо на каждом шаблоне. Если страница сдвигается, какой-то блок шире экрана: таблица, картинка, длинный адрес, встроенное видео.
3. **Текст читается без увеличения.** Основной текст не мельче обычного размера в приложениях, строки не упираются в края экрана, контраст достаточный при ярком свете.
4. **Кнопки и ссылки удобно нажимать.** Пальцем, а не стилусом: элементы достаточно крупные и не стоят вплотную друг к другу. Особенно проверьте меню, фильтры, пагинацию и ссылки в подвале.
5. **Меню открывается и закрывается.** Все пункты доступны, вложенные разделы раскрываются, меню не перекрывает содержимое намертво.
6. **Первый экран не занят баннером.** Всплывающие окна, баннер cookie, кнопка чата и приглашение подписаться не должны закрывать основной текст сразу после загрузки.
7. **Формы работают.** Поля достаточно крупные, при вводе телефона открывается цифровая клавиатура, ошибки подсвечиваются понятно, кнопка отправки видна, заявка действительно уходит.
8. **Телефон и адрес кликабельны.** Номер открывает звонок, адрес — карту. Для локального бизнеса это часто главный сценарий, подробнее — в [локальном аудите](https://seo-audit-sajta.ru/vidy-audita/lokalnyj/).
9. **Содержимое совпадает с десктопом.** Тексты, характеристики, цены, отзывы и внутренние ссылки не вырезаны в мобильной версии. Свёрнутые блоки допустимы, удалённые — нет.
10. **Таблицы и изображения адаптированы.** Широкие таблицы прокручиваются внутри своего блока, а не ломают всю страницу; картинки уменьшаются по ширине экрана.

## Поведение мобильных посетителей

Цифры подскажут, где искать проблему. В Метрике сравните мобильные и десктопные визиты по отказам, глубине просмотра и времени на сайте с группировкой по типу устройства. Если на одном шаблоне показатели с телефонов заметно хуже, чем с компьютеров, откройте записи Вебвизора для этих визитов: часто видно, как человек пытается попасть по кнопке или прокручивает страницу в поисках меню. Карты кликов покажут нажатия на некликабельные элементы.

Отдельно проверьте цели: доходят ли мобильные посетители до заявки. Если конверсия с телефонов в разы ниже без понятной причины, первым делом пройдите путь до формы своими руками.

## Таблица проверки

| Что проверить | Где смотреть | Норма | Если не так |
|---|---|---|---|
| viewport | код страницы | тег есть и корректен | добавить в шаблон |
| Горизонтальная прокрутка | телефон, эмуляция в DevTools | страница не сдвигается вбок | найти широкий блок и ограничить его |
| Размер текста | телефон | читается без увеличения | увеличить базовый размер шрифта |
| Кнопки и ссылки | телефон | попадаете с первого раза | увеличить элементы и отступы |
| Всплывающие окна | телефон, первая загрузка | не закрывают содержимое | показывать позже или компактнее |
| Формы | телефон, тестовая заявка | заявка уходит, клавиатура подходящая | исправить типы полей и вёрстку |
| Совпадение содержимого | сравнение с десктопом | тексты и ссылки на месте | вернуть вырезанные блоки |
| Поведение | Метрика по устройствам, Вебвизор | нет резкого провала на телефонах | разбирать записи визитов |

## Пример на условном сайте

Сайт стоматологии: в Метрике отказы с телефонов почти вдвое выше, чем с компьютеров, и мобильные заявки почти не приходят. В Вебвизоре видно, что на странице услуги кнопка «Записаться» перекрыта плавающей кнопкой чата, а таблица цен уходит за край экрана. Исправления — сдвинуть чат, сделать прокрутку таблицы внутри блока. Обе находки уходят в общий список ошибок, похожий на тот, что собран на странице [типичных технических ошибок](https://seo-audit-sajta.ru/oshibki/tehnicheskie/).

## Итог проверки

- В коде есть корректный viewport, горизонтальной прокрутки нет ни на одном шаблоне.
- Текст читается без увеличения, кнопки и ссылки нажимаются с первого раза.
- Формы работают на телефоне, тестовая заявка доходит.
- Содержимое мобильной версии совпадает с десктопной.
- Поведение мобильных посетителей в Метрике сопоставлено с найденными проблемами.

## Вопросы и ответы

### Достаточно ли проверить сайт в эмуляторе браузера?

Для первого прохода да: эмуляция быстро покажет горизонтальную прокрутку и поломки вёрстки на разной ширине. Но эмулятор не передаёт реальную скорость, поведение клавиатуры, размер пальца и работу всплывающих окон. Финальную проверку ключевых шаблонов и формы делайте на настоящем телефоне.

### Можно ли скрывать часть текста на мобильной версии?

Сворачивать можно: раскрывающиеся блоки и вкладки удобны на маленьком экране, и их содержимое остаётся на странице. Удалять тексты, характеристики и ссылки из мобильной версии не стоит, потому что поисковик оценивает сайт в первую очередь по ней, и вырезанное содержимое для него может просто не существовать.

### Нужна ли отдельная мобильная версия на поддомене?

Для нового сайта лучше адаптивная вёрстка: один адрес и один код для всех устройств. Отдельная версия на поддомене усложняет поддержку и требует правильной связки адресов между версиями, иначе появляются дубли. Если такая версия уже есть, проверьте, что связка настроена и содержимое обеих версий совпадает.

### Как понять, что мобильная версия мешает продажам?

Сравните в Метрике конверсию в заявку с телефонов и с компьютеров на одних и тех же страницах. Большой разрыв без очевидной причины — повод пройти путь до заявки своими руками на телефоне и посмотреть записи Вебвизора. Чаще всего мешает форма, перекрытая кнопка или неудобное меню.