Mobile-friendly аудит (375px)

Прогон {{url}} на 375×667 (iPhone SE) — самый узкий из реально используемых. Если работает тут — работает везде.

Сценарии

Пройди: {{key_flows}}. На каждом шаге фиксируй проблемы.

1. Touch targets

• Минимум 44×44px (Apple HIG) / 48×48px (Material)
• Между интерактивными элементами — минимум 8px зазора
• Найди: маленькие крестики, иконки-кнопки 24×24, ссылки в одну строку друг за другом
• Особое внимание: пагинация, табы, чекбоксы, close-кнопки модалок

2. Скролл

• Нет горизонтального скролла нигде (overflow-x: hidden — это симптом, не лекарство)
• Sticky-элементы не съедают больше 20% экрана
• Pull-to-refresh не ломает sticky header
• Внутри модалок — собственный скролл, не блокирует body

3. Попапы / модалки / тосты

• Модалки занимают весь экран или close большой и доступен большим пальцем
• Toasts не закрывают bottom nav
• Cookie banner не ломает первый экран
• Chat widget не перекрывает CTA

4. Tap vs hover

• Любая логика, висящая на :hover, должна работать через tap (или продублирована)
• Tooltips на hover — на мобиле либо не нужны, либо открываются по tap
• Dropdown menu открывается по tap, закрывается по tap снаружи

5. Inputs

• font-size ≥ 16px — иначе iOS зумит при фокусе
• inputmode/type правильные (tel, email, numeric, url)
• autocomplete атрибуты заполнены
• Виртуальная клавиатура не закрывает поле или CTA
• Submit достижим без скролла после фокуса

6. Производительность

• LCP на 4G < 2.5s
• Изображения с правильным sizes/srcset
• Hero-видео — autoplay только muted+inline, иначе не запустится

Инструменты

• Chrome DevTools → Device toolbar → iPhone SE
• Реальный девайс — обязательно (DevTools врёт про клавиатуру и safe-area)
• Lighthouse Mobile

Формат вывода

Таблица: Экран | Проблема | Серьёзность (1-4) | Фикс. Скриншоты обязательны для критичных.

Анти-паттерны

• ❌ Тестировать только в DevTools без живого устройства
• ❌ Один breakpoint 768px и «как-нибудь поместится»
• ❌ Hide на mobile вместо адаптации (теряешь конверсию)
• ❌ font-size 14px в инпутах (iOS зумит, layout прыгает)
• ❌ Игнорировать safe-area-inset на iPhone с notch