Как проверить адаптивность сайта на телефонах и других экранах

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

Что именно проверяют при оценке адаптивности

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

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

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

Как провести быструю проверку в браузере

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

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

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

Какие размеры и положения экрана использовать

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

Для узкого варианта можно начать с области просмотра около 320 CSS-пикселей. На обычной информационной странице текст и основные элементы должны помещаться без постоянного перемещения вправо и влево. Исключением могут быть отдельные материалы, которым требуется двумерное представление, например сложная таблица, карта или схема. Но горизонтальная прокрутка такого блока не должна растягивать всю страницу.

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

Что проверить на каждой типовой странице

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

На каждом выбранном экране проверьте:

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

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

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

Почему нужна проверка на настоящих устройствах

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

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

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

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

Не записывайте проблему общей фразой «мобильная версия съехала». Укажите адрес страницы, устройство или ширину области просмотра, браузер, положение экрана и последовательность действий. Добавьте скриншот, на котором видна проблема, и коротко опишите ожидаемый результат.

Например: на странице услуги при ширине 360 пикселей кнопка формы выходит за правую границу после открытия списка. Ожидаемый результат — кнопка полностью помещается в области просмотра и остаётся доступной для нажатия. Такая запись помогает воспроизвести ошибку и понять, исправлен ли результат.

Сначала выделите ошибки, которые мешают отправить заявку, прочитать содержание или перейти в нужный раздел. Затем добавьте визуальные недостатки, которые не блокируют действие. После исправления повторите весь сценарий на тех же размерах и проверьте соседние страницы, использующие тот же шаблон.

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