Мобильная версия: дефекты, которых не видно на десктопе

Viewport, зоны нажатия, горизонтальный скролл и клавиатура, закрывающая кнопку. Проверки, от которых зависит, дойдёт ли посетитель с телефона до конца.

Мобильные · Опубликовано: 4 сентября 2026 г. · 3 мин чтения · Дмитрий Орлов

Большинство команд смотрит свой сайт на ноутбуке и выкатывает. Большинство их трафика — с телефона. В зазоре между этими двумя предложениями живёт особое семейство дефектов: ни один не виден на ширине 1440 пикселей, и каждый способен оборвать покупку.

Начните с viewport

Одна недостающая строка заставляет телефон рисовать страницу в десктопной ширине и ужимать её:

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

Два его варианта хуже, чем отсутствие. maximum-scale=1 и user-scalable=no блокируют зум щипком — это грубый провал по доступности для всех, кто плохо видит, и браузеры всё чаще их игнорируют. Никакая вёрстка не стоит того, чтобы отнимать у читателя зум.

Зоны нажатия

Подушечка пальца — примерно девять миллиметров. Гайдлайны сходятся на минимуме около 44 × 44 CSS-пикселей плюс несколько пикселей просвета. Меньше — и нажатия попадают мимо, а посетитель винит сайт, а не свой палец.

Ломается предсказуемо: кнопки-иконки, уменьшенные для мобильных, ссылки в плотном подвале, некликабельные подписи к чекбоксам и пагинация под мышь. Искать надо маленький контрол рядом с другим маленьким контролом: промах по одиночной кнопке стоит мгновения, промах в ряду из пяти — неверного действия.

Горизонтальная прокрутка

Если хоть один элемент шире вьюпорта, вся страница едет вбок, а текст уходит за край. Обычные виновники — таблица фиксированной ширины, картинка без max-width: 100%, блок кода или контейнер с min-width, скопированным из десктопного макета.

Проверка — строка в консоли:

document.documentElement.scrollWidth > window.innerWidth

Запускайте на 360 пикселях для каждого шаблона, а не только для главной.

Проблема клавиатуры

На телефоне экранная клавиатура закрывает нижнюю треть экрана. Кнопка отправки, прижатая к низу формы, оказывается под ней. И сообщение об ошибке, объясняющее, почему форма не отправилась, — тоже. Это самая частая причина, по которой мобильная форма «ничего не делает»: обратная связь есть, но за кадром.

Проверяйте с открытой клавиатурой, а не просто с фокусом в поле в десктопном эмуляторе.

Текст и поля

Размер шрифта меньше 16 пикселей в поле ввода заставляет iOS зумить страницу при фокусе, и вёрстка после этого не восстанавливается. Основной текст мельче 14 пикселей — проблема читаемости на солнце. И каждому полю положены правильные inputmode и autocomplete: цифровая клавиатура для телефона — правка в два атрибута, заметно поднимающая долю заполнений.

Тестируйте на реальных ширинах

Эмуляция в DevTools ловит вёрстку, но не ловит клавиатуру, браузерные панели, съедающие сотню пикселей, и промах на два миллиметра. Раз в релиз прогоняйте ключевые сценарии на живом устройстве, а механическую часть — viewport, размеры зон, переполнение, атрибуты полей — автоматизируйте на каждой странице и на каждом деплое.