Quelle est ma résolution d'écran ?
Découvrez instantanément votre résolution d'écran, la taille de la fenêtre du navigateur, la densité de pixels, la profondeur de couleur et la prise en charge tactile — avec copie en un clic.
1 057 vues
Redimensionnez la fenêtre — les valeurs de la fenêtre d'affichage se mettent à jour en direct.
Ce que le « ratio de pixels de l'appareil » mesure vraiment
Chaque écran possède une grille fixe de pixels physiques — sa résolution native — mais les pages web sont mises en page en pixels CSS, une unité indépendante de la résolution. Le ratio de pixels de l'appareil (DPR, device pixel ratio) est le facteur de conversion entre les deux : combien de pixels physiques servent à dessiner un seul pixel CSS. Sur un écran à densité standard, le DPR vaut 1 et les deux correspondent un pour un. Sur un écran « Retina » ou à haute densité, le DPR vaut généralement 2 ou 3, ce qui signifie qu'un pixel CSS est en réalité rendu sur un bloc de 2×2 (4 pixels physiques) ou de 3×3 (9 pixels physiques). C'est pourquoi le texte et les icônes paraissent nettement plus nets sur ces écrans : le système d'exploitation et le navigateur disposent de quatre ou neuf fois plus de points physiques pour dessiner le même pixel logique, si bien que les courbes et les bords n'ont pas besoin d'être approximés aussi grossièrement.
Cette page lit ce nombre, ainsi que tout le reste affiché sur la carte ci-dessus, directement depuis de vraies API du navigateur : window.screen indique la largeur, la hauteur et la profondeur de couleur natives de l'écran, tandis que window.devicePixelRatio indique le ratio pixel CSS / pixel physique. Les mesures de la fenêtre d'affichage du navigateur proviennent de window.innerWidth/innerHeight, ce qui explique pourquoi ce chiffre est plus petit que la résolution d'écran — il exclut l'espace occupé par les onglets, la barre d'adresse et les bordures de fenêtre. Redimensionnez la fenêtre et ces chiffres se mettent à jour en direct, car ils sont lus directement depuis le navigateur, sans mise en cache.
Où cela s'avère utile
Les usages typiques incluent décrire votre configuration exacte au support technique sans deviner les chiffres, vérifier avec quelles dimensions en pixels un design responsive devra réellement composer sur votre appareil, confirmer qu'un moniteur nouvellement connecté a bien négocié sa résolution native plutôt qu'un mode de repli inférieur, ou vérifier qu'un téléviseur branché comme second écran a reçu le bon signal. Le bouton de copie en un clic récupère un résumé texte propre de chaque valeur, prêt à coller directement dans un ticket de support ou un rapport de bug.
La profondeur de couleur, également affichée sur la carte, fonctionne selon un principe par canal similaire au ratio de pixels : un écran typique en 24 bits alloue 8 bits chacun au rouge, au vert et au bleu, offrant environ 16,7 millions de couleurs possibles par pixel, tandis que certains écrans professionnels et HDR annoncent une profondeur de 30 ou 36 bits pour des dégradés plus fins. L'orientation (portrait ou paysage) et la prise en charge tactile complètent le tableau, toutes deux lues en direct depuis les mêmes interfaces window.screen et navigator plutôt que devinées à partir des dimensions de l'écran ou du reniflage du user-agent.
Questions fréquentes
Pourquoi la fenêtre d'affichage de mon navigateur est-elle plus petite que ma résolution d'écran ?
La fenêtre d'affichage n'est que la zone de dessin interne du navigateur — les onglets, la barre d'adresse, la barre de favoris et les éléments de fenêtre prennent chacun leur part de l'écran. Passer en plein écran supprime la majeure partie de cette marge, rapprochant le plus les deux chiffres.
Que signifie concrètement le ratio de pixels de l'appareil ?
C'est le nombre de pixels physiques qui représentent un pixel CSS. Un ratio de 2 signifie qu'une page large de « 1000 px » en CSS est en réalité dessinée sur 2000 pixels physiques — ce suréchantillonnage est ce qui rend le texte et les icônes nets sur les écrans de type Retina.
Pourquoi la résolution indiquée ne correspond-elle pas à la fiche technique de mon moniteur ?
C'est la mise à l'échelle du système d'exploitation. À 150 % d'échelle, par exemple, un panneau physique de 2880 pixels de large indique 1920 pixels logiques aux pages web. Le panneau utilise toujours chacun de ses pixels physiques — le système d'exploitation dessine simplement tout en plus grand pour garder le texte lisible.
window.screen et window.devicePixelRatio sont-ils fiables d'un navigateur à l'autre ?
Oui — ce sont des API de navigateur standard et prises en charge depuis longtemps, même si window.screen reflète l'écran physique complet tandis que les valeurs de la fenêtre d'affichage ne reflètent que la fenêtre de navigateur actuelle ; il est donc normal, et non un bug, que ces deux chiffres répondent à des questions différentes.
Cet outil peut-il détecter si mon écran prend en charge la saisie tactile ?
Oui — il vérifie la prise en charge d'une entrée tactile via le support des événements pointer et touch du navigateur, ce qui permet à la carte d'indiquer si votre écran actuel est tactile en plus de sa résolution et de sa profondeur de couleur.
Outils similaires
Signaler un problème
Quelle est ma résolution d'écran ?
Commentaires
Pas encore de commentaires — soyez le premier à en écrire un !