Vérificateur de taille de fenêtre
Your viewport size
— × —
CSS pixels (layout viewport)
Resize the window or rotate your appareil to watch values update live. Nothing is uploaded.
Mode d'emploi
- Ouvrez la page: la largeur et la hauteur actuelles de votre fenêtre apparaissent en haut en pixels CSS.
- Redimensionnez la fenêtre du navigateur ou faites pivoter votre appareil et regardez les chiffres se mettre à jour instantanément.
- Utilisez la fiche détaillée pour comparer la résolution de la fenêtre (intérieure), de la fenêtre (extérieure) et du plein écran.
FAQ
Quelle est la taille de ma fenêtre d'affichage?
La grande valeur en haut est votre fenêtre d'affichage: window.innerWidth × window.innerHeight en pixels CSS. Il s'agit de la zone disponible pour le contenu de votre page, à l'exclusion des barres d'outils du navigateur et des barres de défilement chromées.
Quelle est la différence entre la taille de la fenêtre d’affichage et celle de l’écran?
La taille de l’écran (screen.width × screen.height) correspond à l’ensemble de l’affichage. La fenêtre d'affichage n'est que la partie du navigateur affichant votre page. Sur le bureau, la fenêtre d'affichage est plus petite à cause des barres d'outils; sur mobile, il diminue également lorsque la barre d'adresse est visible.
Pourquoi ma fenêtre ne correspond-elle pas à un point d'arrêt CSS?
Les requêtes multimédias de largeur CSS suivent la fenêtre de présentation (la largeur intérieure indiquée ici) et non la résolution de l'écran. Si un point d'arrêt semble erroné, comparez-le à la valeur de largeur intérieure, et non à la résolution annoncée de votre moniteur.
Quelle est la taille intérieure par rapport à la taille extérieure?
La largeur/hauteur intérieure est la fenêtre d'affichage du contenu. La largeur/hauteur extérieure correspond à la totalité de la fenêtre du navigateur, y compris les barres d'outils et les bordures. La carte détaillée affiche les deux afin que vous puissiez voir la quantité d'espace consommée par l'interface utilisateur du navigateur.
Pourquoi ma fenêtre d'affichage mobile continue-t-elle de changer?
Sur les téléphones, la barre d'adresse du navigateur se cache et se révèle lorsque vous faites défiler, ce qui modifie la hauteur disponible. C'est normal, et c'est pourquoi ce vérificateur met à jour les valeurs en direct lors du redimensionnement et du changement d'orientation.
Des données sont-elles envoyées à un serveur?
Non. Toutes les mesures proviennent des propriétés de fenêtre et d’écran de votre navigateur et sont affichées localement. Rien n'est téléchargé.
Introduction
Viewport Size Checker affiche la taille exacte de la zone de contenu de votre navigateur en temps réel. Le titre indiquewindow.innerWidth × window.innerHeight— les dimensions de pixels CSS auxquelles votre mise en page répond réellement — et les valeurs sont mises à jour dès que vous redimensionnez la fenêtre ou faites pivoter votre appareil.
Pour un design réactif, la fenêtre d'affichage est le numéro qui compte. Les requêtes multimédias, les grilles fluides et les bogues de points d'arrêt dépendent tous des dimensions intérieures et non de la résolution annoncée du moniteur. Cet outil place ce numéro là où vous pouvez le lire sans ouvrir les outils de développement.
Ce que mesure cet outil
| Champ | Source | Ce que cela signifie |
|---|---|---|
| Fenêtre d'affichage (intérieure) | window.innerWidth/Height |
Zone de contenu que votre CSS voit – le pilote de point d'arrêt. |
| Fenêtre (extérieure) | window.outerWidth/Height |
Fenêtre entière du navigateur, y compris Chrome. |
| Résolution d'écran | screen.width/Height |
Taille d'affichage complète en pixels CSS. |
| Rapport de pixels de l'appareil | window.devicePixelRatio |
Multiplicateur de pixels physique vers CSS. |
| Orientation | screen.orientation |
Portrait ou paysage, lorsque signalé. |
Fenêtre vs écran vs fenêtre
Ces trois éléments sont faciles à confondre:
- L'écran correspond à l'intégralité de l'affichage physique.
- Fenêtre (externe) est la fenêtre du navigateur, qui peut être plus petite que l'écran si elle n'est pas agrandie.
- Viewport (interne) est la partie de la fenêtre affichant votre page, après les barres d'outils et les barres de défilement.
Les règles CSS@media (max-width: …)suivent la valeur intérieure, c'est pourquoi ce vérificateur est en tête avec elle.
Cas d'utilisation courants
- Points d'arrêt de débogage: confirmez la largeur intérieure exacte lorsqu'une mise en page se brise à une taille inattendue.
- Contrôle qualité réactif sur de vrais appareils: lisez la fenêtre d'affichage en direct sur un téléphone ou une tablette, y compris la manière dont la barre d'adresse affecte la hauteur.
- Capture des étapes de reproduction: enregistrez la fenêtre d'affichage précise dans un rapport de bug au lieu de deviner.
- Revues de conception: vérifiez la largeur cible d'une composition par rapport à votre zone de contenu réelle.
Meilleures pratiques
- Citez toujours la largeur intérieure lorsque vous discutez des points d'arrêt CSS, et non de la résolution de l'écran.
- Test sur des appareils réels: les fenêtres mobiles changent à mesure que la barre d'adresse se cache, ce que les émulateurs ne reproduisent pas toujours.
- Combinez cela avec le device pixel ratio checker pour raisonner à la fois sur la taille et la densité, et avec device info pour l'instantané complet de l'environnement.