1
Breakpoints media queries
Detecte les changements de layout declenches par les breakpoints, assurant la coherence sur toutes les largeurs de viewport.
20 cas de test
Responsive
Le design responsive garantit que votre site fonctionne sur toutes les tailles d'ecran. Un breakpoint casse ou une container query mal configuree peuvent rendre votre page inutilisable sur certains appareils. Delta-QA teste vos layouts a plusieurs tailles de viewport.
Ce que nous detectons
2
Container queries
Surveille les regles @container qui adaptent le style des composants en fonction des dimensions du parent.
3
Layouts dependants du viewport
Capture les changements d'elements utilisant des unites viewport (vw, vh, dvh, svh) et le dimensionnement relatif.
4
Images responsives
Suit les changements de dimensionnement d'images, aspect-ratio et rendu srcset a travers les breakpoints.
Exemple interactif
Voyez exactement ce que Delta-QA détecte. Comparez les deux versions côte à côte.
Avant
Apres
Scénarios concrets
🎯
La grille qui s'empile mal sur tablette
Un développeur modifie le breakpoint responsive de 768px à 480px. Sur desktop et mobile (375px), tout passe. Mais sur tablette (768px), les 3 colonnes de features sont maintenant écrasées — le texte est illisible, les images se chevauchent. Vos visiteurs sur iPad voient un site cassé. Le testeur a vérifié sur desktop et sur mobile, pas sur les tailles intermédiaires. Delta-QA capture le site à chaque breakpoint et compare les captures : les colonnes écrasées et les chevauchements sur tablette ressortent dans le diff.
⚠️
Le menu hamburger qui ne s'ouvre pas
Le menu mobile (hamburger) fonctionne parfaitement à 375px. Mais à 820px (iPad), c'est le menu desktop qui s'affiche... sauf qu'il déborde de l'écran car il est conçu pour 1024px minimum. Les items de menu sont coupés, vos visiteurs sur iPad ne peuvent pas naviguer. Vérifier manuellement chaque composant sur chaque breakpoint, c'est irréaliste. Delta-QA capture le site à 820px et compare les captures : le menu qui déborde de l'écran ressort immédiatement dans le diff.
💡
Le texte qui devient trop petit
Un développeur ajuste une media query et le font-size mobile (14px) s'applique maintenant jusqu'à 1024px au lieu de 768px. Sur un laptop, tout le texte est légèrement trop petit — les visiteurs plissent les yeux sans comprendre pourquoi. Le développeur testait sur son écran 1440px, tout allait bien de son côté. Delta-QA capture le site à 1024px et compare les captures : le texte rétréci et les décalages de mise en page qui en découlent ressortent dans la superposition.
Pret a detecter chaque regression visuelle ?
Telechargez Delta-QA et detectez les changements CSS dans vos pages web — sans code.