Quelle est la taille de ma 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 taille de votre fenêtre d'affichage apparaît en haut sous la forme largeur × hauteur.
- Redimensionnez la fenêtre du navigateur et regardez les chiffres se mettre à jour en direct.
- Cliquez sur Copier pour coller les dimensions de la fenêtre d'affichage dans un rapport de bogue ou une note de point d'arrêt CSS.
FAQ
Quelle est la taille de ma fenêtre d'affichage?
La taille de votre fenêtre d'affichage est window.innerWidth × window.innerHeight — les dimensions en pixels CSS de la zone de contenu du navigateur où les pages s'affichent. Il exclut les barres d'outils, les onglets et les barres de défilement en dehors de la fenêtre de présentation.
Quelle est la différence entre la résolution de la fenêtre d’affichage et celle de l’écran?
La résolution de l’écran correspond à la taille totale du moniteur. La fenêtre d'affichage n'est que la zone de page visible à l'intérieur de la fenêtre du navigateur – généralement plus petite. Les développeurs utilisent la fenêtre d'affichage pour les requêtes multimédias et la mise en page.
Quelles sont les tailles de fenêtre intérieure et extérieure?
La taille intérieure est la fenêtre d'affichage (zone de contenu). La taille extérieure inclut le chrome du navigateur: les onglets, la barre d'adresse et le cadre de la fenêtre. Les deux sont répertoriés dans le panneau de détails.
Pourquoi les pixels CSS diffèrent-ils des pixels physiques?
Le rapport de pixels de l'appareil (DPR) met à l'échelle les pixels CSS sur les écrans HiDPI. La fenêtre d'affichage est en pixels CSS; multiplier par DPR pour les pixels physiques sur l'écran.
Le chrome du navigateur mobile affecte-t-il la fenêtre d'affichage?
Oui. Afficher ou masquer la barre d’adresse sur les téléphones modifie innerHeight. Faites pivoter l'appareil ou faites défiler pour voir les changements de fenêtre - cette page est mise à jour lors du redimensionnement et du changement d'orientation.
Des données sont-elles envoyées à un serveur?
Non. Les dimensions sont lues localement à partir des API de fenêtre. Rien n'est téléchargé.
Introduction
Quelle est la taille de ma fenêtre affiche la largeur et la hauteur en direct de la fenêtre de mise en page de votre navigateur en pixels CSS: les nombres importants pour la conception réactive, les requêtes multimédias et le débogage "Pourquoi ce point d'arrêt semble-t-il faux?".
La fenêtre d'affichage est plus petite que la résolution de l'écran chaque fois que les onglets, les barres d'outils ou l'écran partagé réduisent la zone de contenu. Cette page suit les dimensions intérieures et se met à jour au fur et à mesure que vous redimensionnez, de sorte que vous voyez toujours ce que CSS voit en ce moment.
Ce que mesure cet outil
| Champ | Signification |
|---|---|
| Fenêtre d'affichage (intérieure) | window.innerWidth×innerHeight— fenêtre de présentation |
| Fenêtre (extérieure) | Fenêtre de navigateur complète, y compris Chrome |
| Résolution d'écran | Affichage complet à partir descreen.width×height |
| Rapport de pixels de l'appareil | Facteur d'échelle pour HiDPI / Retina |
Cas d'utilisation courants
- Débogage réactif: confirmez quel point d'arrêt est actif à la largeur actuelle de votre fenêtre.
- Rapports de bugs: collez les dimensions exactes de la fenêtre d'affichage lorsqu'une mise en page est interrompue à une taille spécifique.
- Dimensionnement Iframe et intégration: vérifiez la fenêtre d'affichage parent lorsque le contenu est imbriqué.
- Émulation mobile: comparez la fenêtre d'affichage réelle de l'appareil aux préréglages des outils de développement de bureau.
Meilleures pratiques
- Redimensionnez lentement et regardez la mise à jour du titre - c'est la taille utilisée par les requêtes multimédias CSS.
- Documentez la fenêtre intérieure pour les bugs de mise en page, pas pour la résolution de l'écran — voir what is my screen resolution pour le moniteur.
- Combinez avec what is my device pixel ratio lorsque les images semblent floues ou trop nettes.
- Pour l'environnement complet, ouvrez device info.