Testeur de taille de fenêtre d'affichage et de points de rupture responsive

La fenêtre d'affichage est la zone où une page web doit dessiner — votre fenêtre de navigateur sans les onglets, la barre d'adresses et les barres de défilement. C'est pourquoi elle est presque toujours plus petite que la résolution de votre écran : l'écran représente tout le panneau, tandis que la fenêtre d'affichage n'est que la tranche que la page peut utiliser. Elle est mesurée en pixels CSS, unités de mise en page plutôt qu'en points physiques — les écrans « Retina » à haute densité contiennent deux ou trois pixels physiques dans chaque pixel CSS pour que le texte paraisse plus net, et window.devicePixelRatio rapporte ce multiplicateur.

Cet outil lit window.innerWidth et window.innerHeight à chaque changement de taille et d'orientation, ainsi que la fenêtre d'affichage de mise en page depuis documentElement.clientWidth/clientHeight, le ratio de pixels et l'orientation de votre appareil. Un point de rupture est une largeur de fenêtre d'affichage à laquelle une disposition change — les colonnes s'empilent, un menu se replie, la taille du texte change — et des frameworks comme Tailwind CSS appliquent des styles à partir d'un ensemble de largeurs nommées vers le haut. La référence ci-dessous met en évidence la plage dans laquelle se situe votre largeur, et le panneau de test glissable indique le point de rupture que sa propre largeur atteindrait, vous permettant ainsi de prévisualiser un composant sans redimensionner toute votre fenêtre. Tout fonctionne localement ; rien n'est envoyé.

Si les chiffres semblent décalés, plusieurs éléments se situent entre la résolution de votre panneau et la fenêtre d'affichage qu'une page voit. L'interface du navigateur et les barres de défilement réduisent la zone utilisable, et le zoom de la page réduit le nombre de pixels CSS — donc innerWidth diminue sans que la fenêtre bouge — tout comme la mise à l'échelle de l'affichage du système d'exploitation, ce qui explique pourquoi deux moniteurs identiques peuvent indiquer des tailles différentes. Sur les téléphones, la balise meta viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, affiche la page à la largeur de l'appareil au lieu de simuler un bureau ~980px, donc une fenêtre d'affichage de 390 px à DPR 3 se trouve sur un panneau d'environ 1170 pixels physiques de largeur. Pour voir la résolution physique complète et la densité de pixels de votre écran, utilisez les outils What Is My Screen Size et Screen Resolution Test.

Points de rupture responsive courants