Dimensions du navigateur : Voir la taille de la fenêtre et de l'écran en temps réel

Besoin de connaître la taille de votre viewport ou de vérifier les points de rupture ? L'outil Browser Dimensions affiche les dimensions du viewport, de la fenêtre et de l'écran en temps réel — et se met à jour automatiquement lorsque vous redimensionnez. Toutes les valeurs sont lues depuis votre navigateur ; aucune donnée n'est envoyée à un serveur.

Exemple : Ouvrez l'outil et redimensionnez la fenêtre de votre navigateur. Regardez les valeurs du viewport (intérieur) et de la fenêtre (extérieur) se mettre à jour en direct. Copiez la sortie JSON complète pour documenter les dimensions pour les spécifications de conception ou le débogage.

---

Qu'est-ce que les dimensions du navigateur ?

Les dimensions du navigateur sont les mesures en pixels de la fenêtre de votre navigateur et de votre affichage. Le viewport est la zone visible pour le contenu web (excluant la barre d'adresse et les barres de défilement). La fenêtre inclut le chrome complet du navigateur. L'écran reflète votre affichage physique. Comprendre ces différences aide avec la conception réactive, les requêtes média et le débogage des problèmes de mise en page.

L'outil Tooladex Browser Dimensions lit ces valeurs directement à partir des API JavaScript de votre navigateur. Tout fonctionne localement ; rien n'est téléchargé ou stocké.

---

Pourquoi utiliser un outil de dimensions de navigateur ?

Conception réactive — Vérifiez les points de rupture et le comportement des requêtes média à différentes tailles de viewport. Redimensionnez la fenêtre et voyez exactement quand les mises en page changent.

Débogage CSS — Lorsque 100vw ou 100vh se comportent de manière inattendue (par exemple, décalage de la barre de défilement), vérifiez les dimensions réelles du viewport.

Documentation — Capturez les tailles de viewport pour les spécifications de conception, les guides de test ou les rapports de bogues. Copiez la sortie JSON pour un partage facile.

Test de périphériques — Comparez les dimensions sur différents appareils, niveaux de zoom et configurations de navigateur. Le ratio de pixels de l'appareil et la profondeur de couleur sont inclus.

---

Comment fonctionne l'outil de dimensions du navigateur

1. Ouvrez l'outil dans votre navigateur. Les dimensions se chargent automatiquement.
2. Redimensionnez la fenêtre — les valeurs se mettent à jour en temps réel. Aucun rafraîchissement nécessaire.
3. Examinez les cartes — Les dimensions du Viewport (intérieur), de la Fenêtre (extérieur) et de l'Écran sont affichées avec leurs noms de propriétés JavaScript correspondants.
4. Copiez le JSON — Cliquez sur "Copier JSON" pour copier toutes les dimensions dans un format structuré.

---

Viewport vs Fenêtre vs Écran

Viewport (intérieur) — window.innerWidth × window.innerHeight. La zone visible pour le contenu web. Exclut la barre d'adresse, les barres d'outils et les barres de défilement. C'est ce à quoi les requêtes média CSS et 100vw / 100vh font généralement référence.

Fenêtre (extérieur) — window.outerWidth × window.outerHeight. La fenêtre complète du navigateur incluant le chrome. Utile pour tester la taille de la fenêtre ou le comportement en plein écran.

Écran — screen.width × screen.height. La résolution de votre affichage physique. screen.availWidth et screen.availHeight excluent la barre des tâches et d'autres éléments de l'interface utilisateur du système d'exploitation.

---

Questions Fréquemment Posées

Pourquoi le viewport diffère-t-il de la fenêtre ?
Le viewport exclut l'interface utilisateur du navigateur (barre d'adresse, onglets, 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.

Qu'est-ce que le ratio de pixels de l'appareil ?
Le ratio de pixels de l'appareil (DPR) est le rapport entre les pixels physiques et les pixels CSS. Sur les affichages Retina ou haute DPI, le DPR peut être de 2 ou 3 — un pixel CSS correspond à plusieurs pixels physiques. Cela affecte la netteté des images et le rendu des bordures de 1px.

Mes données sont-elles envoyées quelque part ?
Non. Toutes les valeurs de dimension sont lues localement dans votre navigateur. Rien n'est téléchargé ou stocké.

---

Confidentialité

Tout le traitement se fait dans votre navigateur. Nous n'envoyons ni ne stockons aucune donnée de dimension.

---

Essayez l'outil de dimensions du navigateur

The Browser Dimensions tool is free, works in your browser, and requires no sign-up. Open it, resize your window, and get live viewport, window, and screen dimensions — perfect for responsive design and breakpoint testing.

---

Related Tools

• User Agent Parser — Parse browser, OS, and device info from user agent strings
• JSON Formatter — Format and validate JSON
• Regex Tester — Test and debug regular expressions
• Base64 Encoder / Decoder — Convert text to and from Base64