Tailles et résolutions d'écran des appareils

Résolution logique vs physique et DPR

Chaque écran moderne possède deux résolutions. La résolution physique est le nombre réel de pixels de la dalle — par exemple 1179 × 2556 sur un iPhone 15. La résolution logique (CSS) est l'espace de coordonnées, plus petit, dans lequel une page web est mise en page, comme 393 × 852. Le ratio de pixels de l'appareil (DPR) est le pont entre les deux : c'est la résolution physique divisée par la résolution logique, donc un DPR de 3 signifie que le téléphone dessine un bloc de 3 × 3 pixels réels pour chaque pixel CSS. Les smartphones et ordinateurs portables « Retina » à haute densité utilisent un DPR de 2 ou 3 pour un rendu net du texte et des images, alors qu'un moniteur de bureau classique a un DPR de 1, où un pixel CSS équivaut à un pixel physique.

Pourquoi les designers travaillent en tailles de viewport

Lorsque vous construisez une mise en page responsive, vos media queries et points de rupture CSS sont mesurés en pixels CSS — le viewport logique — et non en pixels physiques de la dalle. Un téléphone physiquement large de 1080 pixels ne signale pourtant qu'un viewport de 360 à 414 pixels CSS, ce qui explique pourquoi un point de rupture mobile de 360px couvre la plupart des téléphones Android. Concevoir en fonction du viewport plutôt que de la résolution brute permet de conserver une taille physique cohérente pour le texte et les zones tactiles sur des appareils aux densités de pixels très différentes, si bien qu'une même mise en page paraît juste aussi bien sur un ordinateur portable peu dense que sur un smartphone haut de gamme très dense.

Comment lire ce tableau

• Viewport (px CSS) est la taille logique que voit une page web, indiquée dans l'orientation naturelle de l'appareil — portrait pour les smartphones et tablettes, paysage pour les ordinateurs portables et moniteurs.
• La résolution physique est le nombre réel de pixels de la dalle, celui annoncé sur une fiche technique.
• Le DPR (ratio de pixels de l'appareil) multiplie le viewport pour obtenir la résolution physique ; toute valeur supérieure à 1 indique un écran à haute densité.
• Le format d'image est la forme de l'écran, du 19,5:9 tout en hauteur des smartphones modernes au 16:9 de la plupart des moniteurs, en passant par le 21:9 et le 32:9 des écrans ultra-larges.
• Les lignes des ordinateurs portables et des écrans 4K reflètent le niveau de mise à l'échelle d'affichage par défaut courant, si bien que le viewport peut être plus petit que la résolution native de la dalle.

Les tailles changent à chaque modèle

Considérez ces chiffres comme un référentiel pratique, non comme une garantie. Les fabricants révisent les dimensions d'écran presque à chaque génération — l'iPhone seul a proposé des viewports de 375, 390, 393, 402, 414, 430 et 440 pixels CSS de large sur ses modèles récents — et les appareils Android varient encore davantage. La mise à l'échelle d'affichage du système d'exploitation modifie de nouveau le viewport signalé : un ordinateur portable Windows en 1080p avec une mise à l'échelle de 150 % se comporte comme un écran de 1280 × 720 avec un DPR de 1,5. Le chiffre le plus fiable reste toujours celui que signale votre propre navigateur, c'est pourquoi l'appareil correspondant ci-dessus est détecté en direct à partir de votre écran.