Pixels CSS et pixels physiques

Les pixels CSS sont des unités logiques utilisées par les navigateurs et les systèmes de conception. Les pixels physiques sont les véritables points matériels sur un écran. Sur les appareils modernes, ces valeurs ne sont souvent pas les mêmes, c'est pourquoi une coordonnée peut sembler erronée si vous comparez différents outils sans tenir compte de la mise à l'échelle.

Si vous créez des interfaces, examinez des captures d'écran ou vérifiez des cibles de clic, vous devez savoir si vos valeurs de coordonnées sont liées à la logique d'affichage ou aux pixels matériels.

Pourquoi la différence est importante

Un navigateur peut signaler les positions basées sur CSS tandis que l'appareil lui-même restitue à une résolution physique plus dense. Cela signifie que le même point visible peut produire différentes valeurs de coordonnées selon le mode de mesure que vous choisissez.

Exemple simple

Un écran peut paraître large de 1 000 pixels pour le navigateur, mais en réalité avoir une largeur physique de 2 000 pixels. Dans ce cas, un point signalé à X=500 en pixels CSS peut correspondre à environ X=1000 en pixels physiques.

• Utilisez le mode d'affichage lorsque vous vous souciez du comportement de la disposition du navigateur ou de l'interface utilisateur.
• Utilisez le mode natif lorsque vous vous souciez de la densité réelle de l'écran ou des positions au niveau du matériel.
• Documentez le mode que vous avez utilisé lors du partage des valeurs de coordonnées.

Guides associés

Ouvrir l'outil | Comment la mise à l'échelle DPI affecte les coordonnées | Coordonnées d'écran pour Mac