Quelle est la différence entre un pixel physique et un pixel logique en CSS?

Lors de la conception et du développement d’un site Web pour appareils mobiles, de nombreux éléments doivent être pris en compte. Utilisez-vous une approche réactive ou adaptative ? Quels appareils/navigateurs doivent être pris en charge ? Quels sont les principaux points d’arrêt ? Lorsque nous essayons de répondre à ces questions, en tant que concepteurs et développeurs, nous avons tendance à nous concentrer sur les résolutions des appareils mobiles comme facteur décisif, mais un élément qui est souvent négligé lorsque l’on considère la taille d’un appareil mobile est le rapport de pixels CSS.< a i=1>En termes simples, le rapport de pixels CSS (également appelé rapport de pixels de l’appareil) est la relation entre les pixels physiques et les pixels logiques d’un appareil. Surtout avec l’avènement des écrans Retina, la résolution en pixels des appareils mobiles modernes augmente à un rythme rapide. Considérez que l’iPhone 3g avait une résolution de 320 × 480 px, la résolution de l’iPhone 4s était de 640 × 960 px et maintenant certains téléphones comme le LG Nexus 5 offrent une résolution de 1080 × 1920 px. Comment peut-on concevoir un site Web pour tous les appareils mobiles alors que les tailles d’écran sont si différentes ? C’est précisément pour cette raison que le rapport périphérique-pixel a été créé.

Revenant à l’idée des pixels physiques et des pixels logiques, nous pouvons voir comment le rapport en pixels de l’appareil permet de maintenir l’ordre. Les pixels physiques sont le nombre réel de pixels sur l’écran d’un appareil. En utilisant à nouveau le Nexus 5 comme exemple, sa résolution d’écran est de 1080 × 1920 px, ce qui signifie que son écran physique mesure 1080 px de large et 1920 px de haut. Désormais, si un navigateur utilisait chacun de ces pixels lorsqu’il tentait de restituer et d’afficher un site Web sur un téléphone doté d’un écran de 5 pouces, les choses seraient bien trop petites pour être vues. Entrez les pixels logiques. Les pixels logiques sont définis comme le nombre de pixels physiques sur l’écran d’un appareil divisé par le rapport de pixels CSS, et les pixels logiques sont ce que vous voyez lorsque vous regardez votre appareil (et plus important encore, ce que voit votre navigateur). Pour le Nexus 5, son rapport de pixels est de 3/1, donc pour 3 pixels physiques, il y a 1 pixel logique en sortie (ceci est souvent appelé en unités de dppx, ou points par pixel). Cela prend une résolution physique de 1 080 × 1 920 px jusqu’à une résolution logique de 360 ​​× 640 px, et une vue beaucoup plus gérable pour vos yeux.

Le tableau ci-dessous présente d’autres appareils et leurs pixels. ratios.

Vous voulez voir comment cela se traduit sur votre propre appareil ? Sortez votre téléphone ou votre tablette et�consultez la démo que j’ai créée pour vous montrer quel est le rapport de pixels CSS de votre propre appareil.< a i=3>La chose importante à retenir est que la résolution de l’écran d’un appareil lorsqu’il est affiché dans un navigateur ne correspond pas toujours à celle indiquée au dos de la boîte.