Test responsive — vérifiez chaque viewport | QA Proof Skip to main content
Test responsive

Trouvez le breakpoint qui casse votre page

QA Proof rend votre page en largeurs desktop, tablette et mobile, puis signale les ruptures de layout, les contenus qui débordent et les zones tactiles trop petites pour être touchées.

Offre gratuite disponible · Sans carte bancaire

3 viewports testés
Desktop 1440px
95
Tablette 768px
78
Mobile 390px
92
Zones tactiles
88

Personne ne teste la tablette

La plupart des équipes vérifient une page sur leur propre portable et un téléphone, puis mettent en ligne. C'est entre ces deux largeurs que tout casse discrètement : une navigation qui passe à la ligne, un tableau qui déborde, un bouton trop petit pour le pouce. Vos utilisateurs le découvrent avant vous.

Comment ça marche

1

Saisissez votre URL

L'URL d'une page suffit — aucun script, aucun parc de terminaux, aucune extension de navigateur.

2

Nous rendons trois viewports

Desktop, tablette et mobile sont rendus dans un vrai navigateur, aux largeurs réelles des appareils.

3

Regardez ce qui a cassé

Chaque viewport reçoit son propre score, accompagné de la liste des problèmes de layout et des media queries suggérées.

Ce que nous vérifions à chaque largeur

Trois viewports réels

Desktop, tablette et mobile rendus aux largeurs réelles des appareils — pas une fenêtre de navigateur écrasée en CSS.

Contrôle des zones tactiles

Signale tout élément interactif sous le minimum de 44 × 44 px recommandé par les guidelines pour un appui fiable.

Détection des débordements

Repère le scroll horizontal, les textes tronqués et les éléments poussés hors du viewport.

Media queries recommandées

Des règles de breakpoint suggérées pour chaque problème, prêtes à intégrer à votre feuille de styles.

Score par viewport

Vous voyez d'un coup d'œil quelle largeur pose problème, au lieu d'une note globale qui mélange tout.

Accès API

Déclenchez les contrôles responsive depuis la CI pour qu'un layout mobile cassé n'atteigne jamais main.

Qui utilise ce produit

Développeurs front-end

Détectez les problèmes de breakpoint que vous trouveriez sinon en redimensionnant la fenêtre à la main.

Ingénieurs QA

Couvrez trois viewports à chaque livraison sans entretenir un parc de terminaux.

Équipes e-commerce

L'essentiel de votre trafic est mobile. Assurez-vous que le tunnel d'achat y fonctionne vraiment.

Questions fréquentes

Desktop en 1440px, tablette en 768px et mobile en 390px par défaut — les largeurs qui représentent l'essentiel du trafic réel. Chacune est rendue dans un vrai navigateur, pas simulée par un redimensionnement.
Les guidelines d'accessibilité fixent un minimum de 44 × 44 px pour les éléments cliquables, car des cibles plus petites provoquent des erreurs d'appui, en particulier pour les personnes ayant un handicap moteur. Les zones tactiles trop petites font aussi partie des principaux freins à la conversion sur mobile.
Nous rendons la page dans un vrai moteur de navigateur, aux largeurs réelles des appareils, ce qui détecte les problèmes de layout, de débordement et de zones tactiles. Les comportements propres au matériel, comme les particularités de la barre d'outils de Safari iOS, nécessitent toujours un appareil physique.
Environ 20 secondes pour les trois viewports.
Les pages doivent être accessibles publiquement pour que le moteur de rendu puisse les charger. Pour un environnement de préproduction, autorisez nos requêtes ou exposez la page sur une URL publique temporaire.

Testez votre page sur tous les viewports

Offre gratuite, sans carte bancaire, trois viewports en 20 secondes environ.

Commencer gratuitement