Testeur de Niveau de Zoom du Navigateur

Non — l'outil redimensionne une mise en page d'exemple à la même "largeur CSS effective" qu'aurait un vrai navigateur à cette largeur de fenêtre et ce niveau de zoom, puis vérifie le véritable débordement horizontal. C'est une approximation proche, pas le moteur de rendu de votre navigateur réel. Pour votre propre site, confirmez toujours avec le vrai zoom de votre navigateur (Ctrl/Cmd + "+").

Le critère de succès 1.4.10 (Reflow) de WCAG 2.1 exige que le contenu se réorganise en une seule colonne sans nécessiter de défilement horizontal à une largeur effective de 320 pixels CSS — la largeur obtenue avec une fenêtre de 1280px zoomée à 400 %, d'où le fait que 1280px et 400 % soient le point de référence standard.

La largeur effective est la largeur de la fenêtre du navigateur divisée par le pourcentage de zoom (par exemple 1280px ÷ 400 % = 320px). Elle représente l'espace en pixels CSS dont dispose réellement votre mise en page une fois le zoom appliqué — le même chiffre qu'un vrai navigateur signalerait à votre CSS.

Les conteneurs à largeur fixe provoquant un défilement horizontal, les éléments de navigation qui se chevauchent, le texte qui déborde de son conteneur, et les boutons ou cartes tronqués sont les problèmes les plus courants qui n'apparaissent qu'au-delà de 150-200 % de zoom. Passez cet outil en mode "Largeur fixe (erreur courante)" pour voir exactement à quoi ressemble cette défaillance.

Oui. La largeur physique de la fenêtre du navigateur en pixels CSS diminue à mesure que le zoom augmente — c'est le mécanisme que cet outil simule en calculant la largeur effective, et c'est pourquoi une page construite avec des largeurs fixes en pixels peut commencer à déborder horizontalement bien avant 400 %.