Informations sur l'appareil

La taille de l'écran n'est pas la taille de la fenêtre

Trois mesures différentes sont constamment confondues, et les mélanger produit des bugs de mise en page qui n'apparaissent que sur les machines des autres. La résolution d'écran correspond à la dalle physique : elle ne change pas quand vous redimensionnez quoi que ce soit. La zone d'écran disponible en soustrait l'espace définitivement occupé par le système d'exploitation, comme une barre des tâches ou la barre de menus macOS. La zone d'affichage (viewport) est la partie de la fenêtre dans laquelle votre page peut réellement dessiner, et c'est la seule des trois à laquelle réagissent les media queries CSS.

Si vous déboguez une mise en page responsive, la zone d'affichage est presque toujours la valeur qui vous intéresse. Un visiteur doté d'un moniteur de 3840 pixels peut très bien lire votre site dans une fenêtre de 700 pixels, et une media query écrite d'après la largeur de l'écran lui servira allègrement la mise en page bureau dans un espace incapable de la contenir.

Le rapport de pixels de l'appareil relie les deux mondes. Un rapport de 2 signifie que chaque pixel CSS est peint avec un bloc de 2x2 pixels physiques, et c'est pourquoi des images nettes sur un ancien moniteur paraissent floues sur un portable moderne. Multipliez la zone d'affichage par le rapport de pixels pour connaître le nombre réel de pixels dont une image matricielle a besoin pour remplir l'espace.

La chaîne user agent ment, et c'est volontaire

Le user agent est le champ le moins fiable de cette page. Tous les grands navigateurs ont passé des décennies à ajouter les noms des autres navigateurs à leur propre chaîne pour contourner des vérifications serveur mal écrites, et c'est pourquoi une version récente de Chrome annonce encore Mozilla, AppleWebKit, KHTML, Gecko et Safari à la fois. Les navigateurs figent et réduisent désormais activement cette chaîne pour limiter le fingerprinting.

Traitez-la comme un indice, jamais comme une décision. Si vous avez besoin de savoir si une fonctionnalité existe, testez la fonctionnalité. Vérifier la présence d'une API prend une ligne, fonctionne sur des navigateurs qui n'existaient pas quand vous avez écrit le code, et ne casse pas quand un éditeur réécrit son user agent.

Ce que ces valeurs révèlent sur vous

Prises séparément, aucune de ces informations n'identifie qui que ce soit. Combinées, elles sont étonnamment distinctives. Résolution d'écran, fuseau horaire, liste de langues, nombre de cœurs et rapport de pixels forment ensemble une empreinte souvent unique parmi des millions de visiteurs, ce qui explique précisément pourquoi les traqueurs les collectent.

C'est aussi pourquoi plusieurs champs renvoient délibérément des valeurs floutées ou absentes. La mémoire de l'appareil est arrondie vers le bas selon des paliers grossiers. Certains navigateurs plafonnent le nombre de cœurs annoncé, refusent d'exposer la mémoire, ou renvoient une chaîne de plateforme générique. Do Not Track a en pratique été abandonné : presque rien ne le respecte et la plupart des navigateurs ne l'envoient plus, donc une valeur vide ici ne signifie rien dans un sens ou dans l'autre.

L'enseignement pratique pour la création de logiciels est de ne collecter que le minimum réellement nécessaire. Si vous voulez décider de charger ou non une animation lourde, mesurez la vitesse d'affichage de la première image plutôt que de la deviner d'après le nombre de cœurs. Une mesure réelle vaut mieux que des caractéristiques matérielles déduites, et elle n'élargit pas la surface d'empreinte.