Testeur de taille de fenêtre d'affichage et de points de rupture responsive
Découvrez la taille réelle de votre fenêtre de navigateur du point de vue d'une page web. Cet outil lit la largeur et la hauteur de votre fenêtre d'affichage en pixels CSS, le ratio de pixels de votre appareil et son orientation, et indique dans quel point de rupture responsive se situe la taille actuelle — le tout en direct. Redimensionnez la fenêtre et chaque valeur se met à jour instantanément.
Redimensionnez la fenêtre de votre navigateur et observez ces valeurs se mettre à jour en direct.
Points de rupture Tailwind CSS
La plage dans laquelle se situe votre fenêtre d'affichage est mise en évidence pendant que vous redimensionnez.
| Préfixe | Largeur min. | S'applique à partir de |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Catégories d'appareils
Panneau de test redimensionnable
Faites glisser le coin inférieur droit pour redimensionner ce panneau. Il indique sa propre taille et le point de rupture que cette largeur atteindrait — une jauge responsive rapide.
Tailles de fenêtre d'affichage courantes des appareils
Fenêtres d'affichage approximatives en pixels CSS en mode portrait, à titre de référence — les valeurs réelles varient selon le navigateur et le système d'exploitation.
| Appareil | Fenêtre d'affichage (px CSS) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Outils associés
Qu'est-ce qu'une fenêtre d'affichage (viewport)
La fenêtre d'affichage est la zone visible dont dispose une page web pour s'afficher — la région de contenu de votre fenêtre de navigateur, sans compter les onglets, la barre d'adresse ou la barre de favoris. C'est pourquoi elle est presque toujours plus petite que la résolution de votre écran : l'écran est le panneau entier, tandis que la fenêtre d'affichage n'est que la portion que la page peut utiliser. window.innerWidth et window.innerHeight indiquent cette zone en pixels CSS, et documentElement.clientWidth/clientHeight indiquent la fenêtre d'affichage de mise en page (la même zone moins la largeur d'une barre de défilement classique, lorsqu'elle est présente). Comme la fenêtre d'affichage change dès que vous redimensionnez, partagez l'écran ou faites pivoter l'appareil, c'est la valeur à laquelle les mises en page responsive réagissent réellement.
Pixels CSS et pixels physiques : le devicePixelRatio
Un pixel CSS est une unité de mise en page, pas un point physique sur le panneau. Sur un écran standard, un pixel CSS correspond à un pixel physique, mais les écrans « Retina » haute densité regroupent deux ou trois pixels physiques dans chaque pixel CSS pour un texte plus net. window.devicePixelRatio indique ce multiplicateur : une valeur de 2 signifie qu'une fenêtre d'affichage de 1440 pixels CSS de large est dessinée avec 2880 pixels physiques. Les pages web sont mises en page en pixels CSS, donc un téléphone annonçant une fenêtre d'affichage large de 390 pixels avec un DPR de 3 possède un panneau physique d'environ 1170 pixels de large. Pour voir la résolution physique complète et la densité de pixels de votre écran, utilisez les outils Quelle est la taille de mon écran et Test de résolution d'écran.
Points de rupture responsive
Un point de rupture est une largeur de fenêtre d'affichage à laquelle une mise en page change — des colonnes s'empilent, un menu se replie, la taille du texte change. Les media queries CSS et les frameworks utilitaires comme Tailwind CSS définissent un petit ensemble de largeurs nommées et appliquent des styles à partir de cette largeur. Les valeurs par défaut de Tailwind sont sm à 640px, md à 768px, lg à 1024px, xl à 1280px et 2xl à 1536px ; en dessous de 640px, vous êtes dans la plage de base sans préfixe. La référence ci-dessous met en évidence la plage active pendant que vous redimensionnez, et le panneau de test redimensionnable indique quel point de rupture sa propre largeur atteindrait — un moyen rapide de prévisualiser le comportement d'un composant à différentes tailles sans modifier toute votre fenêtre.
Pourquoi innerWidth diffère de la largeur de l'écran
Plusieurs éléments se situent entre la résolution de votre panneau et la fenêtre d'affichage qu'une page perçoit. L'interface du navigateur (onglets, barres d'outils et une barre de défilement visible) réduit la zone utilisable. Le zoom de la page la modifie également : zoomer réduit le nombre de pixels CSS qui tiennent, donc innerWidth diminue même si la fenêtre n'a pas bougé, et cela modifie aussi devicePixelRatio. Sur mobile, la balise meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — indique au navigateur de définir la fenêtre d'affichage de mise en page à la largeur de l'appareil au lieu de simuler un bureau d'environ 980px, c'est pourquoi les sites responsive en ont besoin. La mise à l'échelle de l'affichage du système d'exploitation modifie également le nombre de pixels CSS, ce qui explique pourquoi deux moniteurs identiques peuvent annoncer des tailles de fenêtre d'affichage différentes.