1
Breakpoints media queries
Обнаруживает изменения макета, вызванные breakpoints, обеспечивая согласованность на всех ширинах viewport.
20 тест-кейсов
Адаптивность
Адаптивный дизайн гарантирует работу сайта на всех размерах экрана. Сломанный breakpoint может сделать страницу непригодной на определённых устройствах. Delta-QA тестирует макеты на нескольких размерах viewport.
Что мы обнаруживаем
2
Container queries
Мониторит правила @container, адаптирующие стиль компонентов на основе размеров родителя.
3
Макеты, зависящие от viewport
Фиксирует изменения элементов с единицами viewport (vw, vh, dvh, svh) и относительным размерированием.
4
Адаптивные изображения
Отслеживает изменения размеров изображений, aspect-ratio и рендеринга srcset между breakpoints.
Живой пример
Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.
До
После
Реальные сценарии
🎯
Сетка, которая криво складывается на планшете
Разработчик меняет адаптивный breakpoint с 768px на 480px. На десктопе и мобильном (375px) всё в порядке. Но на планшете (768px) три колонки features сжаты — текст нечитаем, изображения перекрывают друг друга. Посетители на iPad видят сломанный сайт. Тестировщик проверил на десктопе и мобильном, но не на промежуточных размерах. Delta-QA делает скриншоты на каждом breakpoint и сравнивает: сжатые колонки и наложения на планшете видны в diff.
⚠️
Меню-гамбургер, которое не открывается
Мобильное меню (гамбургер) отлично работает на 375px. Но на 820px (iPad) показывается десктопное меню... которое вылезает за экран, потому что рассчитано минимум на 1024px. Пункты меню обрезаны, посетители на iPad не могут навигировать. Проверять каждый компонент на каждом breakpoint вручную нереально. Delta-QA делает скриншот на 820px и сравнивает: меню, вылезающее за экран, сразу видно в diff.
💡
Текст, который становится слишком мелким
Разработчик корректирует media query, и мобильный font-size (14px) теперь применяется вплоть до 1024px вместо 768px. На ноутбуке весь текст чуть мельче, чем нужно — посетители щурятся, не понимая почему. Разработчик тестировал на своём экране 1440px, у него всё было хорошо. Delta-QA делает скриншот на 1024px и сравнивает: уменьшенный текст и вызванные этим сдвиги вёрстки видны при наложении.
Готовы ловить каждую визуальную регрессию?
Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.