Тестирование адаптивности вёрстки: как проверить отображение на любом экране?

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

В этой статье разберём:

• Как проверить адаптивность вёрстки.
• Какие разрешения экранов тестировать.
• Как использовать DevTools для эмуляции устройств.

Что такое адаптивная вёрстка и зачем её тестировать?

Адаптивная вёрстка — это подход, при котором страница автоматически подстраивается под размер экрана устройства.

Пример проблемы

• На iPhone 12 Pro (390×844) сайт выглядит идеально.
• На Samsung Galaxy Fold (280×653) — контент обрезается справа.

Чтобы избежать таких ситуаций, тестировщики проверяют:
✅ Корректность отображения элементов (кнопки, тексты, изображения).
✅ Соответствие макетам дизайнера.
✅ Поведение при изменении ориентации экрана (альбомная/портретная).

Как выбрать разрешения для тестирования?

Нельзя проверить все существующие устройства, но можно охватить ключевые сценарии.

1. Смотрим в требованиях

Если в ТЗ указаны конкретные модели (например, iPhone 14, Samsung S23), тестируем на них.

2. Уточняем у менеджера проекта

Команда может заранее договориться тестировать:

• Минимальное (320×568 — iPhone SE).
• Среднее (390×844 — iPhone 12 Pro).
• Максимальное (1440×900 — ноутбуки).

3. Анализируем статистику

• Используйте Google Analytics или Яндекс.Метрику, чтобы определить популярные устройства у вашей аудитории.
• Если данных нет, ориентируйтесь на глобальную статистику (например, StatCounter).

Топ-5 популярных разрешений (2024):

1. Mobile: 360×800 (Samsung A12).
2. Desktop: 1920×1080 (Full HD).
3. Tablet: 768×1024 (iPad Mini).
4. Foldables: 280×653 (Samsung Z Fold).
5. Ultra-wide: 3440×1440 (мониторы).

Инструменты для тестирования адаптивности

1. DevTools (Chrome, Firefox, Edge)

Как эмулировать устройства?

1. Откройте DevTools (Ctrl+Shift+I / Cmd+Opt+I).
2. Нажмите Toggle Device Toolbar (иконка смартфона).
3. Выберите устройство из списка или укажите кастомное разрешение (Responsive).

Что проверять?

• Отображение элементов при изменении ширины/высоты.
• Поведение в альбомной (landscape) и портретной (portrait) ориентации.
• Работа скрывающихся элементов (бургер-меню, аккордеоны).

2. Реальные устройства

DevTools не заменяет тестирование на физических девайсах! Особенно важно проверить:

• Работу клавиатуры (не перекрывает ли поля ввода).
• Тач-жесты (масштабирование, свайпы).
• Производительность (лаги на слабых устройствах).

Чек-лист для тестирования адаптивности

1. Контент
   Текст не вылезает за границы контейнера.
   Изображения не обрезаются и не растягиваются.
2. Интерактивные элементы
   Кнопки и ссылки кликабельны (достаточный размер для тапа).
   Формы ввода работают корректно.
3. Границы экрана
   Нет горизонтального скролла на мобильных.
   Футер прижат к низу на всех разрешениях.
4. Динамические изменения
   При повороте экрана контент перестраивается.
   Медиа-запросы (например, скрытие бокового меню на малых экранах) срабатывают.

🔹 Адаптивная вёрстка — must-have для современного веба.
🔹 Тестируйте на ключевых разрешениях из статистики.
🔹 Используйте DevTools для быстрой проверки, но не забывайте о реальных устройствах.
🔹 Автоматизируйте рутину с помощью BrowserStack или CrossBrowserTesting.

Совет: Для сложных кейсов (например, foldable-устройств) делайте скриншоты и сравнивайте их с макетами в Figma или Adobe XD.