Quelle est la résolution de mon écran ?

Quelle est la résolution de mon écran ?

Le panneau ci-dessus indique ce que votre navigateur annonce pour votre écran, avec cinq autres rectangles dont il tient également le compte. Si seul le chiffre principal vous intéresse, c'est le premier. Et si vous voulez savoir s'il s'agit bien de la résolution de votre matériel, la réponse honnête est que votre navigateur n'est pas tenu de vous la donner — cette page vous montre exactement d'où vient cette incertitude au lieu de la masquer.

Une résolution d'écran est un décompte de pixels : 1920 en largeur sur 1080 en hauteur est l'écran de bureau le plus répandu au monde. La complication tient à ce que les navigateurs ne mesurent pas en pixels matériels. Ils mesurent en pixels CSS, une unité volontairement détachée de la dalle pour qu'une page conserve à peu près la même taille physique sur un téléphone, un portable et un téléviseur. Sur un écran réglé à 200 % de mise à l'échelle, un pixel CSS recouvre deux pixels matériels dans chaque direction, et le navigateur annonce la moitié des chiffres de la fiche technique.

Voilà pourquoi un portable 4K large de 3840 annonce très souvent 1920. Ce n'est pas un bogue et rien n'est cassé : c'est l'unité qui fait son travail.

Comment lire les résultats

1. Commencez par le grand chiffre. C'est screen.width par screen.height, en pixels CSS. Pour la plupart des gens, sur un écran à 100 % de mise à l'échelle, c'est la résolution matérielle et il n'y a rien de plus à faire.
2. Comparez les six rectangles. Chacun est une mesure différente et les écarts entre eux ont un sens : le cadre du navigateur, la barre de défilement, la barre des tâches, le zoom tactile. Redimensionnez la fenêtre et regardez quelles lignes bougent.
3. Lisez l'estimation et sa réserve. Multiplier par le rapport de pixels donne une supposition de vos pixels matériels, et la liste en dessous montre toutes les combinaisons de mise à l'échelle et de zoom qui produiraient exactement le même rapport.

Six rectangles, et tous les outils en confondent certains

La spécification CSSOM View définit chacun séparément, et ce sont des choses réellement distinctes. screen.width, c'est tout l'écran. screen.availWidth, c'est l'écran moins ce que le système d'exploitation réserve : la barre des tâches de Windows, la barre de menus et le dock de macOS. outerWidth, c'est la fenêtre du navigateur avec ses propres barres. innerWidth, c'est le viewport, la zone où une page peut réellement dessiner, barre de défilement comprise. document.documentElement.clientWidth, c'est ce même viewport sans la barre : l'écart entre ces deux lignes vaut donc littéralement la largeur de votre barre de défilement. Et visualViewport, c'est la partie que vous voyez à l'instant, celle que déplacent le zoom à deux doigts sur un téléphone ou un clavier qui remonte à l'écran.

L'essentiel de la confusion dans les rapports de bogue vient de deux de ces mesures comparées comme si elles n'en faisaient qu'une. Une mise en page qui casse « à 1280 » peut casser avec une fenêtre de 1280, un viewport de 1280 ou un écran de 1280 abritant une fenêtre plus étroite, et ce sont trois tests différents.

Les voir bouger reste la façon la plus rapide de s'en imprégner. Rétrécissez cette fenêtre et les quatre dernières lignes changent tandis que les deux premières restent fixes ; ouvrez les outils de développement ancrés sur le côté et les lignes du viewport rétrécissent pendant que celles de la fenêtre ne bougent pas.

Pourquoi le navigateur ne peut pas donner la résolution de votre matériel

Il y a deux raisons distinctes, et toutes deux sont inscrites dans la spécification plutôt que d'être des lubies d'un navigateur particulier.

La première : le navigateur a le droit d'inventer le chiffre. Le module CSSOM View définit screen.width comme la largeur de la « zone d'écran exposée au web », et définit cette zone comme « l'un des éléments suivants : la zone du périphérique de sortie, en pixels CSS ; la zone du viewport, en pixels CSS ». Un navigateur qui vous donne la taille de sa propre fenêtre au lieu de celle de votre moniteur est parfaitement conforme. C'est délibéré : la section 15 du même document indique que l'interface Screen « peut servir d'entrée à des algorithmes d'empreinte numérique » et que les agents utilisateurs « peuvent choisir de masquer ou de quantifier les informations sur la taille ou la configuration de l'écran » afin de protéger l'utilisateur. Les navigateurs et les modes durcis contre le pistage font exactement cela. À noter : MDN décrit la propriété comme simplement « la largeur de l'écran en pixels CSS », soit la première option de la spécification présentée comme si elle était la seule.

La seconde raison ruine le contournement évident. Multiplier la taille CSS par devicePixelRatio semble devoir restituer les pixels matériels, et la définition même de la spécification l'interdit : ce rapport est la taille d'un pixel CSS « au zoom de page actuel » divisée par la taille d'un pixel du périphérique. Le zoom de la page est replié dans le même nombre que la mise à l'échelle de l'écran. Un rapport de 2 signifie un écran haute densité à 100 % de zoom, ou un écran ordinaire à 200 %, et aucun JavaScript ne peut vous dire lequel — appuyez quelques fois sur Ctrl et plus, et regardez l'estimation ci-dessus changer alors que votre moniteur, lui, ne bouge pas.

Un petit détail tiré de la même phrase, puisque presque rien ne le mentionne : le rapport est défini à partir de la taille verticale d'un pixel du périphérique, précisément. Sur un écran hypothétique aux pixels non carrés, la mesure horizontale ne serait pas celle qu'on vous a donnée.

Les noms, et ceux qui sont faux

Le rapport d'aspect ci-dessus est réduit exactement, ce qui en dit plus qu'il n'y paraît. 1366×768, la dalle de portable la plus répandue pendant près d'une décennie, est couramment appelée 16:9 et ne l'est pas : réduite, elle vaut 683:384, car 16:9 de 768 donne 1365,33 et l'on ne peut pas avoir un tiers de pixel. L'écart n'est que de 0,05 %, personne ne s'en aperçoit, mais ce n'est pas la même forme.

Les moniteurs ultra-larges vendus comme 21:9 s'en écartent davantage et ne coïncident même pas entre eux. 2560×1080 vaut 64:27 et 3440×1440 vaut 43:18 — à 1,6 % et 2,4 % de 21:9 respectivement, et de formes différentes l'une de l'autre malgré une étiquette commerciale commune. De même, 1280×1024 vaut exactement 5:4 et non le 4:3 que son époque laisse supposer, ce qui explique les photos étirées sur ces moniteurs.

« 4K » désigne deux choses distinctes. 3840×2160, celle des téléviseurs et des moniteurs, vaut exactement 16:9 et s'appelle proprement UHD. 4096×2160, celle du cinéma, vaut 256:135 — une forme réellement différente, à 6,7 % de 16:9. L'outil nomme les deux correctement au lieu de traiter la 4K comme une résolution unique. Et si le nom suggère quatre mille de quelque chose, ce qui est vraiment vrai se révèle plus utile : l'UHD contient exactement quatre fois les pixels du Full HD.

Pourquoi est-ce gratuit ?

Tout ici est mesuré par votre propre navigateur et affiché sur place. Aucune mesure n'est envoyée où que ce soit, rien n'est journalisé et il n'y a aucun compte à créer : la page ne nous coûte rien par visiteur au-delà de quelques kilo-octets de JavaScript.

Pas d'inscription, aucune limite, et aucun filigrane sur ce que vous copiez.