Ce que la page vous montre
L'outil affiche plusieurs mesures distinctes qu'on confond souvent : la résolution de votre écran, la taille utile de la fenêtre du navigateur, le rapport de densité de pixels, la profondeur de couleur et l'orientation.
Ces valeurs sont fournies par le navigateur lui-même. Elles sont exactes pour l'appareil que vous utilisez en ce moment.
Résolution d'écran et fenêtre : deux choses différentes
La résolution de l'écran décrit le moniteur dans son ensemble. La taille de la fenêtre est l'espace réellement disponible pour afficher la page.
L'écart est considérable et permanent : il faut retrancher la barre de titre, les onglets, la barre d'adresse, les éventuelles barres latérales, la barre de défilement, et le fait qu'une fenêtre n'occupe pas toujours tout l'écran.
C'est la seconde valeur qui compte pour la conception d'un site. Un développeur qui règle ses points de rupture sur la résolution de son moniteur se trompe systématiquement de cible : ses visiteurs voient toujours moins large que lui.
Le rapport de densité de pixels
Sur un écran à haute densité, un pixel CSS ne correspond pas à un pixel physique. Un rapport de 2 signifie que chaque pixel de votre feuille de style est rendu par quatre pixels réels — deux en largeur, deux en hauteur.
C'est ce qui explique qu'un écran annoncé en très haute définition rapporte une largeur en pixels CSS bien plus modeste. Le système fait le calcul pour que les textes gardent une taille lisible.
Conséquence pour les images : sur ces écrans, une image affichée dans un cadre de 400 pixels CSS a besoin d'un fichier de 800 pixels réels pour rester nette. D'où l'usage des jeux d'images en plusieurs résolutions, qui laissent le navigateur choisir le bon fichier selon l'appareil.
Ce que ça change pour la conception
L'erreur la plus répandue consiste à concevoir un site sur un grand écran de bureau et à vérifier ensuite « si ça passe » sur mobile. La proportion de visiteurs sur mobile rend cette approche intenable.
L'approche inverse — concevoir d'abord pour le petit écran, puis enrichir pour les grands — donne de bien meilleurs résultats. Elle oblige à trancher sur l'essentiel dès le départ, au lieu d'essayer de faire rentrer de force une mise en page riche dans une colonne étroite.
Quant aux points de rupture, faites-les dépendre du contenu et non d'une liste de modèles d'appareils. Vous changez de mise en page quand elle cesse d'être lisible, pas quand vous croisez la largeur d'un téléphone précis.
Tester sans multiplier les appareils
Redimensionner la fenêtre de votre navigateur reste le test le plus rapide et le plus honnête : cette page vous en donne les dimensions en direct.
Le mode d'inspection mobile intégré aux navigateurs simule des tailles et des densités variées, ce qui suffit pour l'essentiel du travail. Il ne remplace pas un test sur appareil réel pour ce qui touche aux performances et au tactile, mais il couvre très bien la mise en page.
Profondeur de couleur et orientation
La profondeur de couleur indique le nombre de nuances que l'écran peut restituer. La quasi-totalité des appareils actuels affichent la même valeur : ce n'est plus un critère de conception, seulement une information technique.
L'orientation, en revanche, mérite attention sur mobile. Un site conçu uniquement en mode portrait peut se comporter étrangement une fois le téléphone tourné — et sur les petits écrans en mode paysage, la hauteur devient la ressource rare.