Как проверить сайт на смартфонах и планшетах

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

Почему недостаточно «сжать окно браузера»

Самый популярный способ проверки у владельцев сайтов — уменьшить окно браузера на компьютере и посмотреть, как перестраивается вёрстка. Это полезно, но картину даёт лишь частичную. Реальный смартфон отличается от узкого окна десктопного браузера сразу по нескольким параметрам:

• Управление пальцем, а не мышью. Нет состояния наведения (hover), поэтому выпадающие меню, подсказки и эффекты «при наведении» на телефоне могут просто не работать.
• Экранная клавиатура. Она занимает до половины экрана и способна перекрыть поле ввода или кнопку «Отправить».
• Другие браузеры и движки. Safari на iPhone и Chrome на Android по-разному обрабатывают шрифты, видео, фиксированные элементы и формы.
• Плотность пикселей и масштаб. Картинки, нормальные на мониторе, на экране с высокой плотностью выглядят размыто.
• Мобильный интернет. Страница, которая по офисному Wi-Fi грузится за секунду, в метро может открываться в разы дольше.

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

Шаг первый: эмуляция в инструментах разработчика

В любом современном браузере на компьютере есть режим эмуляции устройств. В Chrome он открывается клавишей F12 и кнопкой с изображением телефона и планшета. Здесь можно выбрать готовый профиль устройства или задать ширину вручную.

Эмуляция хороша для быстрого прогона по типичным ширинам экрана. Рекомендуем проверить как минимум такие значения:

Ширина экрана	Что это за устройства	На что смотреть
320–360 px	Компактные и бюджетные смартфоны	Не вылезает ли текст и кнопки за край, нет ли горизонтальной прокрутки
375–430 px	Большинство современных смартфонов	Читаемость текста, размер кнопок, работа меню
768–834 px	Планшеты в вертикальной ориентации	Не выглядят ли блоки растянутыми, корректно ли работают сетки
1 024–1 180 px	Планшеты горизонтально, небольшие ноутбуки	Переход между мобильным и десктопным меню, отступы

Важно проверять не только «круглые» значения, но и промежуточные: медленно тяните границу окна от узкого к широкому и следите, в какой момент что-то ломается. Часто ошибки возникают именно между контрольными точками вёрстки — например, на ширине 900 px, где уже нет мобильного меню, но десктопное ещё не помещается.

Шаг второй: проверка на реальных устройствах

Эмулятор не покажет, как ведёт себя настоящая клавиатура, как Safari обрезает высоту экрана из-за адресной строки и как работает прокрутка пальцем. Поэтому после эмуляции берите в руки реальные телефоны.

Какой минимальный набор устройств нужен

Не обязательно покупать парк гаджетов. Для небольшого бизнеса достаточно собрать устройства сотрудников и знакомых:

• один iPhone с актуальной версией iOS (браузер Safari);
• один смартфон на Android с Chrome;
• по возможности — недорогой Android с небольшим экраном и слабым процессором;
• планшет — iPad или любой Android-планшет.

Если среди ваших клиентов много пользователей Яндекс Браузера или Samsung Internet (это видно в Метрике), добавьте и их. Статистика посещаемости вообще лучший ориентир: откройте отчёт «Технологии» и посмотрите, с каких устройств и браузеров к вам реально приходят люди.

Удалённые сервисы тестирования

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

Чек-лист: что проверять на каждом устройстве

Чтобы проверка не превратилась в хаотичное «потыкать и посмотреть», идите по списку. Мы в студии используем примерно такой порядок.

Внешний вид и вёрстка

• Нет горизонтальной прокрутки — страница не «гуляет» влево-вправо.
• Текст основного контента читается без увеличения: размер шрифта не меньше 16 px.
• Изображения не обрезаны важной частью, не растянуты и не размыты.
• Таблицы либо прокручиваются внутри своего блока, либо перестроены в карточки.
• Фиксированная шапка не занимает треть экрана.

Навигация и кнопки

• Мобильное меню открывается и закрывается, все пункты кликабельны.
• Кнопки и ссылки достаточно крупные — примерно 44–48 px по высоте — и не стоят вплотную друг к другу.
• Кнопка «Наверх», чаты и всплывающие окна не перекрывают ключевые элементы.
• Ссылки на e-mail открывают почтовое приложение.

Формы

• При фокусе на поле страница не масштабируется сама (частая проблема Safari при шрифте меньше 16 px).
• Для полей e-mail и чисел открывается подходящая клавиатура.
• Клавиатура не закрывает кнопку отправки, её можно прокрутить.
• Заявка реально уходит и приходит на почту — отправьте тестовую с каждого устройства.
• Сообщения об ошибках видны и понятны.

Скорость и поведение

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

Как проверить скорость загрузки на мобильных

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

Базовые инструменты:

1. Сервис PageSpeed Insights — показывает оценку для мобильной версии отдельно и перечисляет, что тормозит загрузку: тяжёлые изображения, блокирующие скрипты, шрифты.
2. Вкладка Network в инструментах разработчика — там можно включить ограничение скорости до уровня медленного мобильного соединения и посмотреть, как страница грузится по частям.
3. Отчёты Вебмастера и Метрики — помогают увидеть, нет ли у мобильной аудитории аномально высокого процента отказов.

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

Как фиксировать найденные ошибки

Проверка имеет смысл, только если её результаты дойдут до разработчика в понятном виде. Сообщение «на телефоне всё криво» почти ничего не говорит. Хороший отчёт об ошибке содержит:

• адрес страницы, где возникла проблема;
• модель устройства, версию системы и браузер;
• ориентацию экрана — вертикальная или горизонтальная;
• скриншот или короткую запись экрана;
• описание: что вы сделали, что ожидали и что произошло на самом деле.

Удобно вести всё в одной таблице: столбцы «страница», «устройство», «проблема», «скриншот», «статус». Так ничего не потеряется, а после исправлений можно пройтись по списку повторно и отметить закрытые пункты.

Как часто нужно повторять проверку

Мобильное тестирование — не разовое мероприятие. Выходят новые модели смартфонов, обновляются браузеры, а на сайт добавляются новые блоки и страницы. Мы советуем проверять сайт:

• перед запуском и сразу после публикации;
• после любых доработок дизайна или добавления новых разделов;
• после установки новых виджетов, чатов, счётчиков;
• раз в несколько месяцев в плановом порядке — даже если ничего не менялось.

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

Вывод

Проверка сайта на смартфонах и планшетах складывается из трёх частей: быстрый прогон в эмуляторе браузера, тест на нескольких реальных устройствах по чек-листу и замер скорости. Особое внимание — формам и кнопкам: именно здесь теряется больше всего заявок. Найденные ошибки фиксируйте подробно, со скриншотами и указанием устройства, — так их исправят быстрее и без лишних вопросов.

Если после проверки выяснилось, что проблем слишком много, возможно, дешевле не латать старую вёрстку, а сделать полноценную адаптацию сайта под мобильные устройства — такая работа стоит от 12 000 руб. А регулярные проверки и мелкие исправления можно передать на техническое сопровождение. Специалисты «Студии-125» протестируют ваш сайт на реальных устройствах и подскажут, что стоит исправить в первую очередь, — просто напишите нам через страницу контактов.