Мобильную версию сайта нельзя проверить одной шириной экрана

Но ширина экрана — только один из параметров. Даже устройства с близкими размерами могут по-разному отображать и вести одну и ту же страницу.

Почему одинаковой ширины недостаточно

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

Панели мобильного браузера также занимают часть пространства и меняют доступную высоту страницы во время прокрутки.

Пользователь может увеличить системный размер текста. В этом случае подписи переносятся на дополнительные строки, кнопки становятся выше, а заранее рассчитанные карточки и панели начинают ломаться.

Отдельно нужно проверять экранную клавиатуру. Форма часто выглядит исправно до начала ввода, но после открытия клавиатуры поле или кнопка отправки оказываются перекрыты, а прокрутка работает неправильно.

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

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

Наконец, управление пальцем отличается от работы мышью. Маленькая иконка, тесно расположенные ссылки или незаметная зона нажатия могут быть удобны курсором и почти непригодны на телефоне.

Минимальный сценарий мобильной проверки

Сначала страницу нужно проверить на нескольких контрольных ширинах. Для большинства проектов полезно посмотреть как минимум 360, 390 и 430 пикселей. Это позволяет увидеть переломы сетки, поведение длинных заголовков и изменение отступов.

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

• открыть и закрыть мобильное меню;
• прокрутить длинную страницу;
• перейти по основным ссылкам;
• заполнить форму и вызвать клавиатуру;
• проверить сообщения об ошибках и подтверждение отправки;
• нажать закреплённые и всплывающие элементы.

Для важных страниц дополнительно проверяют горизонтальную ориентацию, увеличенный системный шрифт и медленное соединение.

Что считать успешной адаптивностью

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

Поэтому мобильную версию нельзя принять по одному скриншоту или одной ширине браузера. Её нужно проверять в реальных условиях использования.