Quelle est ma résolution d'écran ?
Voyez votre résolution d'écran et la taille de la fenêtre se mettre à jour en direct au redimensionnement.
Ce vérificateur affiche votre résolution d'écran en pixels, la taille de votre fenêtre de navigateur (le viewport), votre device pixel ratio, votre profondeur de couleur et votre orientation actuelle. Tout se met à jour en direct : réduisez la fenêtre ou faites pivoter une tablette, et les chiffres changent sous vos yeux. C'est la façon rapide d'obtenir les valeurs exactes pour un rapport de bug, un test de design responsive ou un échange avec le support.
Les chiffres proviennent directement de votre navigateur et de votre appareil, lus en JavaScript. Rien n'est envoyé à un serveur et rien n'est stocké : l'affichage que vous voyez est simplement ce que votre propre écran rapporte.
Ces trois valeurs sont souvent confondues, alors l'outil les montre côte à côte. La résolution d'écran est la taille totale en pixels de votre affichage. Le viewport n'est que la zone visible dans laquelle votre page web peut dessiner, plus petite à cause des barres d'outils du navigateur et du zoom. Le device pixel ratio indique combien de pixels physiques se cachent derrière chaque pixel CSS, la raison pour laquelle un ordinateur portable ou un téléphone haute densité paraît net.
Comment vérifier votre résolution d'écran
- Ouvrez la page. Votre résolution d'écran et la taille du viewport apparaissent aussitôt.
- Lisez le device pixel ratio, la profondeur de couleur et l'orientation en dessous.
- Redimensionnez la fenêtre de votre navigateur et regardez les valeurs du viewport se mettre à jour en direct.
- Sur un téléphone ou une tablette, faites pivoter l'appareil pour voir l'orientation et les tailles changer.
- Copiez les valeurs dont vous avez besoin pour votre rapport de bug ou votre test de design.
Résolution, viewport et device pixel ratio
Imaginons un ordinateur portable qui rapporte une résolution d'écran de 1920 sur 1080 mais un viewport de 1200 sur 700. L'écart, c'est l'interface du navigateur, la barre des tâches du système et le zoom de la page, qui rognent tous l'espace réellement disponible pour votre page. Quand vous construisez une mise en page responsive, c'est le viewport qui décide du breakpoint appliqué, pas la résolution d'écran.
Le device pixel ratio explique pourquoi un téléphone qui annonce un nombre de pixels énorme s'affiche pourtant comme un écran bien plus petit. Un ratio de 2 signifie que chaque pixel CSS est dessiné avec un bloc de 2 sur 2 pixels physiques, donnant un texte net sans tout rétrécir. La profondeur de couleur, généralement 24 bits, indique combien de couleurs l'écran peut afficher, et l'orientation bascule entre portrait et paysage quand vous faites pivoter l'appareil.
Ce que signifie chaque valeur de la page
La résolution d'écran est rapportée en largeur par hauteur en pixels CSS pour l'ensemble de votre affichage. Le viewport est la largeur et la hauteur de la zone que votre contenu web peut réellement utiliser à l'intérieur de la fenêtre actuelle. Le device pixel ratio est le multiplicateur entre les pixels CSS et les pixels physiques. La profondeur de couleur est le nombre de bits utilisés par pixel pour la couleur, et l'orientation indique si le bord le plus court ou le plus long est actuellement horizontal.
Vues ensemble, ces valeurs décrivent à la fois la toile qu'offre votre affichage et la portion plus petite qu'une page web reçoit à cet instant. Cette distinction est tout l'intérêt de l'outil : les gens disent généralement « résolution d'écran » alors que le chiffre qui régit l'apparence d'un site pour eux est en réalité le viewport, si bien qu'afficher les deux prévient le malentendu le plus courant d'un seul coup d'œil.
Pixels CSS contre résolution native de votre dalle
Voici l'honnêteté que la plupart des vérificateurs omettent : le navigateur rapporte des valeurs en pixels CSS, qui sont une abstraction logicielle, pas nécessairement la grille de pixels physiques de votre dalle. Sur un affichage haute densité, le navigateur rapporte délibérément une résolution « logique » plus petite et l'associe à un device pixel ratio supérieur à 1 : un ordinateur portable dont la dalle fait physiquement 2560 sur 1600 peut ainsi rapporter 1280 sur 800 avec un ratio de 2. Multipliez la taille rapportée par le pixel ratio pour estimer la grille physique.
La mise à l'échelle de l'affichage du système d'exploitation ajoute une autre couche. Si vous réglez Windows ou macOS pour agrandir l'interface, la résolution CSS que rapporte le navigateur reflète ce réglage mis à l'échelle plutôt que le maximum réel de la dalle. Le chiffre ici répond donc à « que voit le navigateur », ce qui importe pour la mise en page web, et il peut légitimement différer de la résolution native inscrite sur la fiche technique de votre moniteur.
Quand ces chiffres sont utiles
Pour le développement web responsive, cet outil est un contrôle de réalité rapide. Vous pouvez faire glisser la fenêtre et observer exactement où se déclenchent vos breakpoints CSS, confirmer qu'une media query se déclenche bien à la largeur de viewport prévue, et saisir les dimensions précises auxquelles une mise en page commence à casser. Le faire dans un vrai navigateur détecte des choses qu'un préréglage d'émulateur fixe peut manquer.
C'est tout aussi précieux pour le support et les rapports de bug. Un défaut visuel qui n'apparaît qu'à une certaine taille de fenêtre ou à un certain pixel ratio est bien plus facile à reproduire quand le rapporteur inclut son viewport, sa résolution et son device pixel ratio. Plutôt que de décrire un écran avec des mots, un utilisateur peut copier les chiffres exacts, donnant au développeur une configuration qu'il peut reproduire immédiatement.
Interpréter le pixel ratio et les breakpoints
Un piège fréquent est de supposer qu'un appareil affichant un grand nombre de pixels annoncé a besoin d'une mise en page pour ordinateur. Ce n'est généralement pas le cas : un téléphone peut avoir des millions de pixels physiques mais présenter un viewport de quelques centaines de pixels CSS de large seulement, car le pixel ratio élevé est consacré à la netteté, pas à l'espace de mise en page supplémentaire. Concevez toujours en fonction de la largeur du viewport, et laissez le pixel ratio s'occuper séparément de la netteté des images.
Cela guide aussi la façon de servir les images. Sur un affichage rapportant un device pixel ratio de 2 ou 3, une image en résolution standard peut paraître floue, c'est pourquoi les images responsives proposent des variantes en plus haute résolution pour les écrans haute densité. Lire votre propre ratio ici rend le concept concret : c'est le multiplicateur exact qu'un site utiliserait pour décider de vous envoyer une ressource plus nette.
Limites et précision
Comme le navigateur expose des pixels CSS façonnés par la mise à l'échelle de l'OS et le zoom, la résolution rapportée n'est pas une lecture directe du matériel de votre dalle. Le zoom de la page en particulier décale les valeurs du viewport : si les chiffres semblent erronés, vérifiez que votre zoom est à 100 pour cent. Rien de tout cela n'est une erreur ; c'est simplement le navigateur rapportant le système de coordonnées qu'il utilise réellement pour disposer les pages.
Les valeurs peuvent aussi être arrondies ou contraintes pour la confidentialité dans certains navigateurs, et les configurations multi-écrans rapportent l'affichage sur lequel se trouve actuellement la fenêtre plutôt que l'ensemble du bureau. Traitez l'affichage comme une description exacte de la vue actuelle du navigateur, à laquelle les pages web réagissent, plutôt que comme une spécification matérielle définitive de votre moniteur.
Outils de navigateur associés
Le vérificateur de user-agent est le compagnon évident, puisqu'une chaîne de navigateur plus les dimensions de votre écran et de votre viewport décrivent ensemble l'environnement auquel un site s'adapte. Quand une mise en page se comporte mal, fournir les deux est le moyen le plus rapide pour un développeur de reproduire exactement ce que vous voyez, et les deux outils lisent purement depuis le navigateur sans rien envoyer.
Si un problème d'affichage ou de chargement s'avère lié à votre connexion plutôt qu'à votre écran, les outils Quelle est mon adresse IP, recherche d'adresse IP et recherche DNS couvrent le côté réseau. Avoir l'ensemble complet à portée de main vous permet de dire rapidement si un problème réside dans votre navigateur, votre appareil ou le chemin réseau vers un site.
Questions fréquentes
Cet outil de résolution d'écran est-il gratuit ?
Oui, gratuit, sans inscription ni limite. Ouvrez-le dès que vous avez besoin des chiffres.
Pourquoi mon viewport est-il plus petit que ma résolution d'écran ?
Le viewport n'est que la zone où votre page web peut dessiner. Les barres d'outils du navigateur, la barre des tâches de l'OS et le zoom de la page le réduisent : il est donc normalement plus petit que la résolution d'écran complète.
Qu'est-ce que le device pixel ratio ?
C'est le nombre de pixels physiques cachés derrière chaque pixel CSS. Un ratio de 2 ou 3, courant sur les téléphones modernes et les ordinateurs haute densité, est ce qui rend le texte et les images nets.
Les chiffres se mettent-ils à jour quand je redimensionne la fenêtre ?
Oui. La taille du viewport, l'orientation et les valeurs associées se mettent à jour en direct quand vous redimensionnez la fenêtre ou faites pivoter l'appareil : vous voyez les breakpoints changer en temps réel.
Une partie de ces informations est-elle envoyée quelque part ?
Non. Chaque valeur est lue localement depuis votre navigateur et votre appareil en JavaScript. Rien n'est envoyé ni stocké : l'outil est donc sûr à utiliser partout.
Est-ce que ça marche sur téléphones et tablettes ?
Oui. Cela fonctionne dans n'importe quel navigateur mobile moderne et y est vraiment utile, puisque vous pouvez faire pivoter l'appareil et voir la résolution, le viewport et l'orientation changer.