🥹 Как быстро проверить адаптив

Адаптив ломается не только из-за «размеров экрана». Настоящие проблемы часто прячутся в специфических состояниях, которые легко воспроизвести прямо в DevTools:

1️⃣ Симуляция сенсорного ввода

— Включите Toggle device toolbar + Sensors → Touch

— Проверяйте hover-эффекты, замену их на tap-события, длинное нажатие

2️⃣ Вращение и смена DPR

— Поворот устройства (`Ctrl/Cmd+Shift+M → Rotate`)

— Смена devicePixelRatio — выявляет баги с размерами иконок и картинок

3️⃣ Эмуляция медленной сети

— Network → Slow 3G + throttle CPU

— Отлично видно, как грузится layout и сдвигаются блоки

4️⃣ Edge cases размеров

— Тестируйте ширину 320–360px и 1024px в портретной ориентации

— На границах брейкпоинтов часто «рвёт» верстку

🌟 Такой подход ловит неочевидные баги: от невидимых кнопок на ретина-экранах до ползущих попапов при переходе из портрета в альбом.

🐸 Библиотека тестировщика

#буст