Как протестировать адаптивную верстку?

Тестирование адаптивной верстки (responsive layout testing) нужно, чтобы убедиться, что сайт или веб-приложение корректно отображается на разных устройствах и разрешениях экрана.

---

🔹 1. Что проверять

A. Основное

• Корректное отображение на разных разрешениях (desktop, tablet, mobile).

• Гибкость сетки: элементы не вылезают за границы экрана.

• Размеры шрифтов и кнопок — читаемость и доступность (особенно на мобильных).

• Правильная работа меню (бургер-меню, dropdown).

• Изображения: не обрезаны, адаптируются под экран.

• Формы: удобный ввод, поля не налезают друг на друга.

B. Функциональность

• Клики, скроллы, свайпы работают на мобильных.

• Ничего не перекрывает важный контент (например, fixed header).

• Всплывающие окна корректно масштабируются.

C. Кроссбраузерность

• Проверить в разных браузерах (Chrome, Safari, Firefox, Edge).

• Обратить внимание на iOS vs Android (Safari/Chrome) — часто есть различия.

---

🔹 2. Как тестировать

A. DevTools (ручное тестирование)

В Chrome / Firefox DevTools есть режим Device Toolbar:

1. Открыть DevTools → Ctrl+Shift+M / Cmd+Shift+M

2. Выбрать устройство (iPhone, iPad, Galaxy, и т. д.)

3. Проверить адаптацию под разные размеры экрана.

👉 Быстро и удобно, но не заменяет реальное устройство.

---

B. Эмуляторы и реальные устройства

• Эмуляторы Android Studio, Xcode (iOS Simulator).

• Реальные устройства — самый надежный способ.

---

C. Инструменты для автоматизации

• Selenium / Playwright / Cypress → можно тестировать верстку на разных viewport:

  await page.setViewportSize({ width: 375, height: 812 }); // iPhone X
  await page.screenshot({ path: 'mobile.png' });

• Percy, Applitools, BackstopJS → визуальное регрессионное тестирование (сравнение скриншотов).

---

🔹 3. Чек-лист адаптивности

✅ Контент читаем без увеличения ✅ Нет горизонтального скролла ✅ Изображения и видео масштабируются ✅ Меню работает на мобильных ✅ Кнопки удобны для нажатия пальцем ✅ Нет наложения элементов ✅ Поддержка ориентаций (портрет/альбомная)