Как тестировать сайт на смартфоне: viewport, сенсорные кнопки, клавиатура и медленная сеть
Тест сайта на смартфоне должен быть воспроизводимым. Запишите устройство, браузер, ширину viewport, ориентацию, сеть и маршрут пользователя. Тогда команда сможет повторить ошибку, а не спорить о том, «как выглядит сайт на телефоне».
Для первичной проверки достаточно одного реального Android или iPhone, режима разработчика браузера и отдельного сценария на медленной сети. Эмулятор помогает найти часть проблем, но не заменяет сенсорный ввод и реальную клавиатуру.
Как подготовить тест смартфона
Выберите устройство с актуальной версией ОС и браузера, затем добавьте модель со средними характеристиками, если аудитория не ограничена флагманами. Проверьте портретную и альбомную ориентацию, автоматический поворот и масштаб страницы.
Запишите URL, дату и чистое состояние браузера. Кэш может скрыть проблему с загрузкой, а сохраненные данные — ошибку формы.
Как проверить viewport и масштаб
Откройте страницу без ручного увеличения. Контент должен соответствовать ширине экрана, а текст — оставаться читаемым. Проверьте отсутствие горизонтального скролла, обрезанных заголовков и элементов, которые можно увидеть только после случайного свайпа.
Почему viewport важен
Мобильный браузер может использовать виртуальную ширину, если страница не сообщает ожидаемый viewport. В результате десктопная композиция сжимается и становится слишком мелкой. Проверяйте не только код, но и фактический вид страницы на устройстве.
Как проверить сенсорные элементы и клавиатуру
Пройдите меню, карточки, ссылки и кнопки одним пальцем. Обратите внимание на расстояние между соседними действиями. В форме откройте каждое поле, введите длинное значение, вызовите клавиатуру и нажмите отправку.
Проверьте, не перекрывает ли клавиатура активное поле и не появляется ли горизонтальный сдвиг. После ошибки значение должно сохраняться, а сообщение — объяснять, что исправить.
Как проверить медленную сеть
Откройте страницу при ограниченной мобильной сети и посмотрите, что появляется первым. Главный заголовок и основное действие не должны ждать второстепенного виджета. Следите за поздними сдвигами изображений и шрифтов.
Повторите маршрут после полной перезагрузки. Запишите, сколько времени нужно до возможности прочитать материал и нажать кнопку. Не называйте результат универсальным: это измерение конкретного устройства, сети и страницы.
Как оформить отчет
Укажите модель телефона, ОС, браузер, viewport, URL и последовательность действий. Разделите ожидаемое и фактическое поведение. Скриншот обрежьте так, чтобы в нем не осталось личных данных, токенов и уведомлений.
После исправления повторите тот же тест. Если ошибка исчезла только в одном браузере, проверьте второй и решите, относится ли проблема к коду, движку или настройке конкретного устройства.
