Les écrans de mobile haut de gamme ont atteint des résolutions proches de la précision de l'oeil humain, à 30cm de distance.
Exemples :
- Apple iPhone XS : taille 5.85", résolution 2688x1242, DPI 458, DPPX 3
- Samsung Galaxy S8 : taille 5.8", résolution 2960×1440, DPI 572, DPPX 4
Le ratio de pixels de l'appareil a été inventé par les fabricants de téléphones afin qu'ils puissent continuer à augmenter la résolution, la netteté et la qualité des écrans du téléphone, sans rendre les éléments de l'écran trop petits pour être vus ou lus.
Avec un devicePixelRatio de 4, chaque pixel "logique" de la page web correspond à 16 pixels physiques.
Conséquences du devicePixelRatio : les images
Si vous dites à un navigateur d'afficher une image 400x400 sur width: 400px et height: 400px, sur un mobile avec un devicePixelRatio de 4, le mobile va utiliser 1600x1600 pixels pour l'afficher. Cela va forcément être un peu flou.