Dimensions du Navigateur
Consultez les dimensions du viewport, de la fenêtre et de l'écran de votre navigateur en temps réel. Parfait pour le design responsive, les tests de points de rupture et les media queries CSS. Se met à jour automatiquement lors du redimensionnement.
Loading dimensions…
JavaScript is required. This tool runs entirely in your browser.
Table des Matières
Que sont les Dimensions du Navigateur ?
Les dimensions du navigateur sont les mesures en pixels de votre fenêtre de navigateur et de votre écran. Cet outil affiche le viewport (la zone où le contenu web est visible), la fenêtre (incluant le chrome du navigateur) et l'écran (votre affichage). Il se met à jour en temps réel lors du redimensionnement.
Toutes les valeurs sont lues depuis les APIs JavaScript de votre navigateur. Aucune donnée n'est envoyée à un serveur.
Viewport vs Fenêtre vs Écran
- Viewport (interne) : La zone visible pour le contenu web — exclut la barre d'adresse, les barres d'outils et les barres de défilement. Utilisez ceci pour le design responsive et le comportement 100vw / 100vh.
- Fenêtre (externe) : La fenêtre complète du navigateur incluant le chrome. Utile pour tester le dimensionnement des fenêtres ou le comportement plein écran.
- Écran : La résolution de votre affichage physique. screen.availWidth et screen.availHeight excluent les barres de tâches et l'UI du système d'exploitation.
Cas d'Utilisation Courants
- Design responsive : Vérifiez les points de rupture et le comportement des media queries à différentes tailles de viewport.
- Débogage CSS : Vérifiez les dimensions réelles du viewport quand 100vw ou 100vh se comportent de manière inattendue.
- Documentation : Capturez les tailles de viewport pour les spécifications de design ou les guides de test.
- Tests d'appareils : Comparez les dimensions entre différents appareils et niveaux de zoom.
Questions Fréquentes
Le viewport exclut l'UI du navigateur (barre d'adresse, onglets, barre de favoris, barres de défilement). La fenêtre inclut tout. Sur mobile, la barre d'adresse se cache souvent lors du défilement, donc le viewport peut changer.
Le ratio de pixels du périphérique (DPR) est le rapport entre les pixels physiques et les pixels CSS. Sur un écran Retina ou haute résolution, le DPR peut être 2 ou 3 — un pixel CSS correspond à plusieurs pixels physiques. Cela affecte la netteté des images et le rendu des bordures de 1px.
Non. Toutes les valeurs de dimension sont lues localement dans votre navigateur. Rien n'est téléchargé ou stocké.