Vérificateur de Résolution d’Écran
Viewport, Ratio et Densité de Pixels

Ce qu’un vérificateur de résolution d’écran fait pour vous

Souvent les chiffres d’un écran se cachent dans trois endroits différents. En effet, votre système connaît une taille, la fenêtre du navigateur en connaît une autre, et votre page en voit une troisième. Donc un vérificateur de résolution d’écran met les trois côte à côte, et ensuite les écarts entre elles prennent enfin un sens.

D’ailleurs, il n’y a rien à configurer. Parce que la page lit chaque valeur dès son chargement, la taille de votre écran, votre viewport et votre rapport de pixels s’affichent avant que vous ne touchiez à quoi que ce soit.

De plus, quatre panneaux partagent une seule page. Par conséquent, vous passez de la simple taille d’écran au ratio d’aspect, à la densité de pixels et à la fréquence de rafraîchissement sans quitter l’onglet.

Enfin, tout tourne dans votre navigateur. Donc aucune de ces lectures n’arrive sur ce site, et nous ne stockons rien.

Comment fonctionne le vérificateur de résolution d’écran

D’abord, l’outil demande à votre navigateur l’objet screen. Ensuite il mesure la fenêtre elle-même. Puis il divise l’un par l’autre, donc le rapport de pixels et le nombre de pixels natifs sortent des deux mêmes lectures.

D’ailleurs, l’outil ne devine rien. Parce que chaque ligne vient d’une propriété de navigateur documentée, vous pouvez vérifier chacune vous-même dans une console si vous le voulez.

Quelle est ma résolution d’écran ?

Souvent la paire en tête est celle que les gens viennent chercher. Donc le haut de la page montre votre largeur et votre hauteur d’écran, écrites comme une fiche technique les écrit, par exemple 1920 par 1080.

Cette paire vient de l’objet screen que votre navigateur expose. Parce que le navigateur compte en pixels CSS, un portable à dalle fine affiche souvent un chiffre plus petit que celui de la boîte.

Pixels CSS et pixels natifs

D’abord, deux comptes de pixels vivent dans chaque affichage moderne. Le pixel CSS est l’unité dont parle votre feuille de style, alors que le pixel natif est un point réel dans la dalle.

Donc l’outil multiplie la taille CSS par le rapport de pixels, puis il écrit la taille native en dessous. Ainsi un écran de 1512 par 982 à un rapport de deux contient vraiment 3024 par 1964 points. D’ailleurs, la page MDN sur window.devicePixelRatio expose la règle que suivent les navigateurs.

La zone d’écran disponible

Pourtant votre écran n’est pas entièrement à vous. Car une barre des tâches, un dock ou une barre de menus garde une bande, et le navigateur indique donc aussi une largeur et une hauteur disponibles.

L’outil montre les deux paires, donc la différence vous dit combien de mobilier votre bureau retient. Sur un téléphone les deux paires se rejoignent souvent, alors que sur un ordinateur elles le font rarement.

Profondeur de couleur et orientation

Ensuite, deux lectures plus petites se trouvent dans le même panneau. La profondeur de couleur compte les bits par pixel, et presque chaque affichage répond aujourd’hui vingt-quatre.

De plus, l’orientation dit si vous êtes en portrait ou en paysage, et elle donne l’angle. Par conséquent une tablette que vous tournez met à jour les deux lignes en même temps, comme le décrit la page MDN sur screen.orientation.

Un vérificateur de viewport dans la même page

Le viewport est la partie de la fenêtre où votre page peut vraiment dessiner. Donc le deuxième panneau le mesure directement, et ensuite il tient ce chiffre face à la taille d’écran au-dessus.

D’abord, deux lectures apparaissent ici. La fenêtre donne une largeur, puis l’élément document en donne une autre, et tout écart entre elles est la barre de défilement.

Cela dit, cet écart vaut parfois zéro. Car un navigateur à barres de défilement superposées fait flotter la barre au-dessus de la page au lieu de lui réserver de la place : le panneau indique donc zéro pixel, et la capture ci-dessous montre exactement ce cas.

Pourquoi le viewport est plus petit que l’écran

Le mobilier du navigateur mange le reste. Parce que la barre d’onglets, la barre d’adresse et la rangée de favoris se placent tous au-dessus de votre page, le viewport perd cent pixels de hauteur ou plus.

Ensuite, la largeur suit le même chemin dès qu’une barre de défilement apparaît. Donc une fenêtre agrandie sur un écran large de 1920 indique souvent 1905 pour le document, et ces 15 manquants sont la barre elle-même. D’ailleurs, les règles derrière les deux lectures vivent dans le module CSSOM View du W3C.

Dans quel breakpoint vous êtes

Souvent un site change de mise en page à quelques largeurs fixées. Donc l’outil nomme la bande où vous êtes en ce moment, du téléphone étroit à la tablette jusqu’au grand écran.

Puis redimensionnez la fenêtre, et l’étiquette vous suit. Par conséquent vous observez exactement où une maquette bascule, sans ouvrir un seul outil de développement.

Le viewport visuel sur un téléphone

Cela dit, un téléphone ajoute une couche de plus. Car dès que le clavier s’ouvre ou que vous pincez pour zoomer, la partie visible se réduit, même si la mise en page garde sa taille.

L’outil indique cette boîte visible et l’échelle de zoom à côté. Pour cela, voyez la page MDN sur l’API VisualViewport.

Ratio d’aspect et densité de pixels

Ensuite, le troisième panneau transforme vos deux tailles en formes. D’abord il réduit la taille d’écran en un ratio, puis il calcule à quel point les pixels se serrent.

Les deux chiffres aident quand vous choisissez une image ou une vidéo. Ainsi une bannière 16:9 remplit exactement un écran de 1920 par 1080, alors qu’un portable 16:10 laisse une bande.

Comment l’outil réduit le ratio d’aspect

Un ratio n’est qu’une fraction en termes les plus simples. Donc l’outil divise les deux côtés par leur plus grand commun diviseur, et 1920 par 1080 devient 16:9.

Cela dit, certaines tailles ne tombent jamais sur une paire nette. Par exemple, 1366 par 768 se réduit à 683:384, donc l’outil nomme aussi le ratio courant le plus proche à côté.

Le PPI a besoin de la diagonale de votre écran

Pourtant les pixels par pouce ne peuvent pas venir du navigateur. Car aucune page web ne peut demander à une dalle sa taille en pouces, et le chiffre reste donc vide jusqu’à ce que vous tapiez la diagonale vous-même.

Entrez donc 27 pour un écran de 27 pouces, et l’outil fait le reste. Ensuite il divise la diagonale native en pixels par votre mesure, donc une dalle de 3840 par 2160 à 27 pouces tombe près de 163 PPI.

Fréquence de rafraîchissement et capacités d’affichage

Enfin, le quatrième panneau demande ce que votre affichage sait faire. Donc il échantillonne la fréquence de rafraîchissement, et ensuite il vérifie les fonctions de couleur et de contraste que votre navigateur reconnaît.

Chaque ligne ici contient une réponse du navigateur, pas une consultation du matériel. Par conséquent le panneau reste honnête sur cette différence.

La fréquence de rafraîchissement est une estimation

Aucun navigateur ne donne directement la fréquence de rafraîchissement. L’outil compte plutôt les images d’animation pendant environ une seconde, puis il arrondit le compte à la fréquence courante la plus proche.

Donc traitez la réponse comme approchée plutôt qu’exacte. Car un onglet occupé ou un économiseur de batterie laisse tomber des images, et une dalle 120 Hz indique parfois 60 pendant qu’elle se bride. D’ailleurs, le rappel d’image derrière ce compte se trouve sur la page MDN requestAnimationFrame.

Gamut de couleur et plage dynamique

Ensuite, deux requêtes média répondent à la question de la couleur. D’abord l’une demande si votre affichage couvre l’espace P3 plus large, puis l’autre demande s’il gère la plage dynamique élevée.

Un oui ici signifie que votre navigateur revendique la capacité. Donc traitez-le comme un indice pour une décision CSS, comme le suggère la référence MDN color-gamut, plutôt que comme un rapport de calibrage.

Contraste, mouvement et indices de pointeur

De plus, le même panneau lit les préférences que vous gardez dans votre système. Mode sombre, mouvement réduit, contraste élevé et couleurs forcées reçoivent chacun une ligne.

Le pointeur et le survol complètent le tout, donc un écran tactile et une souris se distinguent tout de suite. D’ailleurs, toutes ces requêtes se trouvent dans la spécification Media Queries Level 5 du W3C.

Ce que ce vérificateur de résolution d’écran ne peut pas vous dire

Un outil honnête nomme ses limites. Donc voici les lignes que cette page n’écrira jamais, quel que soit le nombre de rafraîchissements.

Le modèle de votre écran reste inconnu, et la marque de votre carte graphique aussi. De plus, les pouces physiques demandent votre propre mesure, alors que la fréquence de rafraîchissement reste un échantillon plutôt qu’une lecture venue de la dalle.

Copier tout le rapport

Enfin, un seul bouton prend tout. Donc appuyez sur Copier le rapport, et chaque panneau arrive dans votre presse-papiers en liste simple d’étiquettes et de valeurs.

Cette liste se colle directement dans un ticket de bug. Par conséquent un testeur dit exactement quel écran, quel viewport et quel ratio ont produit un problème de mise en page.

Sûr par conception

L’outil travaille dans votre navigateur. Car il n’envoie rien, et il ne stocke rien. Donc les tailles qu’il lit, la diagonale que vous tapez et le rapport que vous copiez restent tous sur votre propre appareil.