Как правильно проверять

  • Режим устройства в инструментах разработчика (Ctrl/Cmd+Shift+M) — быстро, но не показывает реальные тач-жесты и скорость слабого процессора.
  • Реальный смартфон — обязателен хотя бы раз: он вскрывает то, что эмулятор не покажет — залипающие тапы, перекрытия, реальную скорость.
  • Проверяйте и iOS, и Android, если аудитория есть на обеих: Safari и Chrome по-разному обрабатывают некоторые CSS-свойства.
  • Проверяйте не только главную — карточку товара, форму заявки и страницу оформления заказа отдельно.

Первый экран

  • Есть тег viewport с width=device-width — без него мобильный браузер может отрисовывать десктопную раскладку в уменьшенном виде.
  • Нет горизонтальной прокрутки — ничего не «вылезает» за правый край экрана.
  • Главный текст и оффер видны без длинной прокрутки, а не спрятаны под тремя экранами баннеров.
  • Текст читается без масштабирования пальцами: разумный размер шрифта и межстрочный интервал.

Перекрывающие виджеты

Чаты, баннеры cookie-согласия, всплывающие предложения и закреплённые кнопки — частая причина, по которой мобильная версия выглядит рабочей на скриншоте, но неудобной в руках.

  • Виджет чата не перекрывает кнопку отправки формы или CTA в нижней части экрана.
  • Баннер cookie-согласия закрывается одним тапом и не блокирует прокрутку.
  • Всплывающее предложение (popup) имеет заметный крестик и закрывается по тапу вне окна.
  • После закрытия баннера или попапа страница не «прыгает» на другое место.

Формы на мобильном

  • Поле для телефона открывает цифровую клавиатуру, для email — клавиатуру с @ и точкой.
  • Поля достаточно крупные, чтобы попасть пальцем с первого раза, с заметным расстоянием между ними.
  • Автозаполнение браузера работает: поля подписаны стандартными именами (имя, телефон, email), а не только placeholder-текстом.
  • После отправки формы видно понятное сообщение об успехе на том же экране, без прокрутки в поисках результата.

Размер кнопок и тач-таргеты

Палец — не курсор мыши. Слишком мелкие или тесно расположенные ссылки и кнопки — частая причина случайных нажатий не туда.

  • Кликабельная область кнопок и ссылок — от 40–48px, а не только видимый текст внутри неё.
  • Между соседними кнопками есть заметный отступ, чтобы не задеть соседнюю.
  • Иконки без подписи (корзина, поиск, меню) достаточно крупные и узнаваемые.

Скорость на мобильной сети

Адаптивная вёрстка не спасает, если страница весит несколько мегабайт и грузится десять секунд в метро. Проверьте вес и скорость отдельно на мобильном профиле — подробнее в статье о скорости сайта.

Что можно проверить автоматически

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