BrowserTools
Accueil / Divers / Résolution d'écran et informations d'affichage, quelle est la taille de mon écran

Résolution d'écran et informations d'affichage, quelle est la taille de mon écran

Vérifiez instantanément votre résolution d'écran, la taille du viewport, le ratio de pixels, la profondeur de couleur, le HDR, le taux de rafraîchissement et la prise en charge tactile, le tout détecté localement dans votre navigateur.

Chargement de Résolution d'écran et informations d'affichage, quelle est la taille de mon écran… Si rien ne se passe, activez JavaScript.

Vous vous demandez quelle est votre résolution d'écran ? Cet outil répond instantanément à cette question, ainsi qu'à presque tout ce que votre navigateur sait sur votre écran. Dès le chargement de la page, il lit votre résolution d'écran en pixels CSS, estime les dimensions en pixels physiques en multipliant par le ratio de pixels de l'appareil et affiche la zone d'écran disponible (l'espace restant après la barre des tâches ou la barre de menus du système d'exploitation), ainsi que la taille en direct du viewport du navigateur lui-même. Redimensionnez la fenêtre ou faites pivoter votre téléphone : les valeurs du viewport se mettent à jour en temps réel, ce qui rend l'outil pratique pour le design responsive comme pour la simple curiosité.

Questions fréquentes

Quelle est ma résolution d'écran et pourquoi diffère-t-elle de la résolution annoncée de mon moniteur ?
L'outil affiche votre résolution d'écran en pixels CSS, c'est-à-dire ce que les sites web voient réellement. Sur les écrans haute densité, le système d'exploitation met l'interface à l'échelle, si bien qu'un moniteur 4K avec une mise à l'échelle de 150 pour cent annonce 2560 x 1440 pixels CSS. La ligne d'estimation physique multiplie la taille CSS par le ratio de pixels de l'appareil pour retrouver la valeur matérielle, de sorte que les deux chiffres sont affichés côte à côte.
Qu'est-ce que le ratio de pixels de l'appareil (DPR) ?
Le ratio de pixels de l'appareil est le nombre de pixels physiques utilisés pour dessiner un pixel CSS. Un ratio de 1 correspond à un écran de densité standard, tandis que 2 ou 3 indiquent un écran haute densité, comme un portable Retina ou un téléphone récent. Les valeurs fractionnaires comme 1,25 ou 1,5 proviennent généralement de la mise à l'échelle de l'affichage du système d'exploitation. Un ratio plus élevé signifie un texte et des images plus nets, car davantage de pixels matériels dessinent la même zone à l'écran.
Quelle est la différence entre résolution d'écran, écran disponible et viewport ?
La résolution d'écran est la taille complète de votre écran en pixels CSS. L'écran disponible soustrait l'espace réservé en permanence par le système d'exploitation, comme la barre des tâches de Windows ou la barre de menus de macOS. Le viewport est la zone intérieure de la fenêtre du navigateur où les pages sont réellement affichées ; il rétrécit donc quand vous réduisez la fenêtre. Les valeurs du viewport de cette page se mettent à jour en direct quand vous redimensionnez la fenêtre ou faites pivoter votre appareil.
Comment le taux de rafraîchissement est-il mesuré, et quelle est sa précision ?
L'outil échantillonne 120 images d'animation consécutives avec requestAnimationFrame, prend le temps médian entre les images et le convertit en hertz. Sur un système au repos, cela identifie de façon fiable les taux courants comme 60, 90, 120 ou 144 Hz. Une forte charge du processeur, les modes d'économie de batterie ou la limitation du navigateur peuvent abaisser la lecture ; considérez-la donc comme une estimation et utilisez le bouton de nouvelle mesure pour échantillonner à nouveau dans des conditions plus calmes.
Que signifient les valeurs de gamut sRGB, P3 et Rec. 2020 ?
Elles décrivent l'étendue des couleurs que votre écran et votre navigateur peuvent reproduire. sRGB est la base standard couverte par pratiquement tous les écrans. Display P3 est environ 25 pour cent plus large et courant sur les téléphones, tablettes et portables haut de gamme récents, avec des verts et des rouges plus riches. Rec. 2020 est un gamut encore plus large utilisé par les écrans professionnels et orientés HDR. L'outil rapporte le gamut le plus large que votre navigateur déclare pris en charge, via la media query color-gamut.
Comment savoir si mon écran prend en charge le HDR ?
La ligne HDR utilise la media query dynamic-range : elle affiche oui lorsque le navigateur signale que la sortie à grande plage dynamique est actuellement active sur cet écran. Notez que le HDR dépend souvent de plus que la dalle elle-même ; le réglage du système d'exploitation, le câble et le navigateur doivent tous le prendre en charge. Si vous possédez un moniteur HDR mais que l'outil indique non, vérifiez que le HDR est activé dans les paramètres d'affichage de votre système.
Pourquoi l'outil indique-t-il que mon appareil est tactile alors que mon portable n'a pas d'écran tactile, ou l'inverse ?
La détection tactile repose sur ce que le navigateur expose, et certains pilotes ou navigateurs signalent des événements tactiles sur du matériel sans écran tactile, ou l'inverse. C'est pourquoi l'outil affiche aussi le nombre maximal de points de contact et les media queries de pointeur : un pointeur principal fin correspond à une souris ou un pavé tactile, grossier à un doigt, et la ligne any-pointer répertorie tous les types d'entrée connectés. Ensemble, ces informations donnent une image bien plus fiable qu'un simple oui ou non.
Que signifie la profondeur de couleur ?
La profondeur de couleur est le nombre de bits utilisés pour décrire la couleur d'un pixel. La valeur courante de 24 bits correspond à 8 bits par canal rouge, vert et bleu, soit environ 16,7 millions de couleurs. Certains systèmes compatibles HDR annoncent 30 bits, ce qui permet plus d'un milliard de nuances et des dégradés plus doux. La valeur affichée est celle que votre navigateur rapporte pour l'écran actuel.
Les valeurs se mettent-elles à jour quand je redimensionne la fenêtre ou fais pivoter mon appareil ?
Oui. L'outil écoute les changements de taille et d'orientation, de sorte que la taille du viewport, l'orientation et les valeurs associées se rafraîchissent immédiatement quand vous faites glisser le bord de la fenêtre ou tournez votre téléphone ou votre tablette. Ce comportement en direct en fait une référence rapide et pratique pour tester des mises en page responsives et des points de rupture CSS.
Des informations sur mon écran sont-elles téléversées ou stockées ?
Non. Chaque valeur est lue localement par votre navigateur à l'aide de propriétés JavaScript standard et de media queries CSS, et elle n'est affichée que sur votre écran. Rien n'est envoyé à un serveur, journalisé ni enregistré. Le bouton de copie place simplement le rapport dans votre propre presse-papiers sous forme de texte brut, pour que vous puissiez le coller où vous en avez besoin.

À propos de Résolution d'écran et informations d'affichage, quelle est la taille de mon écran

Les écrans modernes sont plus complexes qu'un simple nombre largeur par hauteur, et cette page fait remonter les détails qui restent habituellement cachés. Le ratio de pixels de l'appareil vous dit si vous êtes sur un écran de densité standard ou de haute densité (classe Retina), et l'estimation en pixels physiques montre ce que cela signifie en pratique : un portable annonçant 1440 x 900 pixels CSS avec un ratio de 2 pilote en réalité 2880 x 1800 pixels physiques. Vous obtenez aussi la profondeur de couleur de votre écran en bits, le gamut de couleurs le plus large que votre navigateur rapporte (sRGB, Display P3 ou Rec. 2020), si la sortie à grande plage dynamique est actuellement active et quel jeu de couleurs (clair ou sombre) votre système demande aux sites web.

L'outil estime également le taux de rafraîchissement de votre écran directement dans le navigateur. Il échantillonne 120 images d'animation avec requestAnimationFrame, prend l'intervalle médian entre les images et le convertit en hertz, de sorte qu'un moniteur de bureau à 60 Hz, un téléphone à 120 Hz et une dalle gaming à 144 Hz donnent des lectures nettement différentes. Comme les navigateurs peuvent limiter la cadence des images sous charge ou en mode économie d'énergie, un bouton de nouvelle mesure vous permet de relancer l'échantillonnage quand vous voulez une lecture à jour. En plus des données d'affichage, vous obtenez un rapport sur les capacités d'entrée : la présence du tactile et le nombre de points de contact simultanés pris en charge, si votre pointeur principal est fin (souris, pavé tactile) ou grossier (doigt), quels autres types de pointeurs sont connectés, si le survol est possible et si votre système demande une réduction des animations.

Tout ce qui figure sur cette page est lu localement par votre propre navigateur à l'aide d'API web standard et de media queries CSS ; rien n'est téléversé, journalisé ni stocké sur un serveur. C'est donc un moyen rapide et sûr de répondre aux questions courantes : confirmer qu'un moniteur fonctionne à sa résolution native, vérifier qu'un nouveau téléphone possède bien l'écran à haut taux de rafraîchissement annoncé, contrôler la prise en charge du HDR et du gamut étendu avant de retoucher des photos, ou récupérer les chiffres exacts demandés par un technicien de support ou un développeur web. Un bouton de copie exporte le rapport complet en texte brut pour le coller dans un e-mail, un ticket de bug ou une discussion en un clic.

De 320 x 200 à la 8K : comment les résolutions d'écran ont grandi

Pendant la majeure partie des années 80, les utilisateurs d'ordinateurs personnels vivaient avec des résolutions qui semblent presque invraisemblables aujourd'hui. Le standard CGA d'IBM, sorti en 1981, offrait 320 x 200 pixels en quatre couleurs, et le standard VGA de 640 x 480 de 1987 représenta un tel bond qu'il resta la résolution de référence des installateurs de logiciels et des écrans de démarrage pendant deux décennies. Le nombre de pixels grimpa avec le SVGA et le XGA dans les années 90, mais le vrai tournant fut le passage des encombrants tubes cathodiques aux dalles plates LCD vers l'an 2000, qui figea chaque écran sur une grille de pixels native et fit de la résolution exacte une caractéristique phare plutôt qu'un réglage secondaire.

La révolution suivante fut celle de la densité plutôt que de la taille. Quand Apple introduisit l'écran Retina sur l'iPhone 4 en 2010, elle doubla les pixels dans chaque direction tout en conservant les mêmes dimensions d'écran, et l'industrie adopta l'astuce consistant à séparer les pixels physiques des pixels logiques. C'est exactement pour cela que cet outil distingue les pixels CSS de l'estimation physique : un téléphone moderne peut afficher les sites web sur 390 pixels logiques de large alors que sa dalle contient en réalité 1170 colonnes physiques, soit un ratio de pixels de 3. Sans cette séparation, le texte et les boutons conçus pour les anciens écrans paraîtraient microscopiques sur les nouveaux.

Le taux de rafraîchissement a suivi le même chemin, passant de standard immuable à argument concurrentiel. Presque tout a fonctionné à 60 Hz pendant des décennies, un héritage des contraintes des tubes cathodiques et des fréquences du réseau électrique, jusqu'à ce que les moniteurs esport banalisent les 144 Hz et plus, et que les fabricants de téléphones commencent à livrer des dalles à 90 et 120 Hz vers 2019. Pendant ce temps, le marketing des résolutions poursuit sa route : les écrans 4K quadruplent les pixels du Full HD, la 8K les quadruple encore pour dépasser 33 millions de pixels, et les gamuts étendus comme Display P3 et Rec. 2020 poussent la palette de couleurs reproductibles bien au-delà du standard sRGB défini en 1996. La modeste question de savoir quelle est ma résolution d'écran a désormais une réponse étonnamment riche, et c'est précisément ce que cette page détaille.

Soutenir