Ко всем шагам

Проверка мобильной вёрстки

Комплексная проверка мобильной вёрстки: наличие <meta name="viewport">, отсутствие горизонтального скролла, элементы за границей вьюпорта и слишком мелкие тач-таргеты (<32px). Не переключает размер окна — поставьте перед этим шагом «Задать размер окна» на мобильное разрешение (например 375×812).
Пример использования

Комплексная «Проверка мобильной вёрстки» — заменяет несколько отдельных шагов одним. За один прогон проверяет:

  • наличие <meta name="viewport"> в <head>;
  • отсутствие горизонтального скролла документа (scrollWidth − clientWidth ≤ 1px);
  • что ни один видимый элемент не вылезает за правый край окна (getBoundingClientRect().right ≤ innerWidth);
  • что у интерактивных элементов (ссылки, кнопки, поля, [role=button], элементы с onclick) размер ≥ 32×32 px — иначе сложно попасть пальцем.

Поля не нужны.

Важно: шаг не переключает размер окна. Поставьте перед ним «Задать размер окна» со значением 375|812 (или другой мобильный профиль) — иначе проверка пройдёт на десктопной вёрстке и потеряет смысл.

В сообщении об ошибке перечислены конкретные проблемы: селекторы вылезающих элементов с величиной overflow в пикселях и список мелких тач-таргетов с их размерами. Это попадает в AI-анализатор падений и в карточку шага в отчёте.

Типичный сценарий:

  1. Перейти на страницу — https://mysite.com
  2. Задать размер окна — 375|812
  3. Перезагрузить страницу
  4. Проверка мобильной вёрстки