La conception responsive vise à rendre un site utilisable sur différentes largeurs et orientations de fenêtre. Tester uniquement une largeur de bureau et une largeur de téléphone peut laisser passer des problèmes de débordement, de retour à la ligne ou de navigation entre ces deux tailles. Ce testeur dans le navigateur redimensionne une iframe isolée selon des dimensions CSS prédéfinies ou personnalisées, ce qui facilite les vérifications visuelles reproductibles. Il aide à régler la taille de la fenêtre d’affichage, mais ne remplace pas les tests sur appareils réels, les outils de développement du navigateur ni les vérifications d’accessibilité.
Choisir et tester les points de rupture
Les points de rupture dépendent du contenu et de la mise en page du site ; ils ne correspondent pas à des catégories d’appareils universelles. Tailwind, Bootstrap et Material utilisent des seuils différents, et un site peut en nécessiter plus ou moins. Testez les largeurs définies par le CSS du projet, ainsi que des valeurs intermédiaires juste en dessous et au-dessus de chaque seuil. À chaque largeur, examinez la navigation, les colonnes, le retour à la ligne du texte, les images, les formulaires et les débordements horizontaux. Ce testeur permet de répéter ces vérifications, mais il ne détecte pas les points de rupture et ne juge pas si une mise en page est correcte.
Préréglages ou dimensions personnalisées
Les préréglages sont des couples largeur-hauteur nommés, pratiques pour les dimensions courantes à vérifier. Les dimensions personnalisées conviennent mieux lorsque le CSS du projet utilise des points de rupture précis ou qu’il faut reproduire un signalement de bug. Le cadre et l’iframe sont redimensionnés, mais le testeur ne modifie pas l’agent utilisateur du navigateur, ne simule pas le DPR d’un appareil réel, son encoche, ses marges de zone sûre ou son clavier, et ne reproduit pas l’interface du navigateur mobile. Lorsque ces comportements comptent, utilisez l’émulation d’appareil du navigateur et des appareils physiques, puis servez-vous de ce testeur pour comparer rapidement les fenêtres.
Liste pratique de vérification responsive
Utilisez ce testeur comme liste de contrôle manuelle : chargez une URL autorisée, vérifiez des largeurs étroites, intermédiaires et larges, faites pivoter les vues mobiles et tablettes, puis examinez le retour à la ligne du texte, les images, les formulaires, la navigation, les éléments fixes et les débordements horizontaux. Une page blanche ou une erreur peut signifier que le site cible bloque l’intégration en iframe ; cela ne prouve pas que le site lui-même est défectueux. La taille des zones tactiles, l’accès au clavier, la visibilité du focus, le comportement des lecteurs d’écran et les problèmes propres aux appareils réels nécessitent des vérifications distinctes avec le navigateur ou des technologies d’assistance. Lors du signalement d’un problème responsive, indiquez la largeur, la hauteur, le zoom, le navigateur et l’URL cible afin qu’une autre personne puisse le reproduire.