Vous ne pouvez pas vraiment obtenir les dimensions physiques réelles ou le DPI réel et même si vous le pouviez, vous ne pouvez rien faire avec eux.
C'est une histoire assez longue et complexe, alors pardonnez-moi.
Le Web et tous les navigateurs définissent 1px comme une unité appelée pixel CSS. Un pixel CSS n'est pas un vrai pixel, mais plutôt une unité considérée comme 1 / 96e de pouce en fonction de l'angle de vue de l'appareil. Ceci est spécifié comme pixel de référence .
Le pixel de référence est l'angle visuel d'un pixel sur un appareil avec une densité de pixels de 96 dpi et une distance du lecteur d'une longueur de bras. Pour une longueur de bras nominale de 28 pouces, l'angle visuel est donc d'environ 0,0213 degrés. Pour une lecture à bout de bras, 1px correspond donc à environ 0,26 mm (1/96 de pouce).
Dans 0,26 mm d'espace, nous pourrions avoir de très nombreux pixels réels.
Le navigateur le fait principalement pour des raisons héritées - la plupart des moniteurs étaient de 96 dpi lorsque le Web est né - mais aussi pour des raisons de cohérence, dans le «vieux temps», un bouton 22px sur un écran 15 pouces à 800x600 était deux fois plus grand qu'un bouton 22px sur un écran 15 pouces à 1600x1200. Dans ce cas, le DPI de l'écran est en fait 2x (deux fois la résolution horizontalement mais dans le même espace physique). C'est une mauvaise situation pour le Web et les applications, de sorte que la plupart des systèmes d'exploitation ont conçu de nombreuses façons d'abstraire les valeurs de pixels dans des unités indépendantes de l'appareil (DIPS sur Android, PT sur iOS et CSS Pixel sur le Web ).
Le navigateur iPhone Safari a été le premier (à ma connaissance) à introduire le concept de fenêtre d'affichage. Cela a été créé pour permettre aux applications de style bureau complet de s'afficher sur un petit écran. La fenêtre a été définie comme ayant une largeur de 960 pixels. Cela a essentiellement zoomé la page 3x (l'iphone était à l'origine de 320 pixels), donc 1 pixel CSS équivaut à 1/3 d'un pixel physique. Lorsque vous avez défini une fenêtre, vous pouvez faire en sorte que cet appareil corresponde à 1 pixel CSS = 1 pixel réel à 163 dpi.
En utilisant une fenêtre où la largeur est "largeur de l'appareil" vous évite d'avoir à définir la largeur de la fenêtre sur une base par appareil à la taille de pixel CSS optimale, le navigateur le fait juste pour vous.
Avec l'introduction des appareils à double DPI, les fabricants de téléphones mobiles ne voulaient pas que les pages mobiles paraissent 50% plus petites, ils ont donc introduit un concept appelé devicePixelRatio (d'abord sur le webkit mobile je crois), cela leur permet de garder 1 pixel CSS à peu près 1 / 96e de pouce, mais laissez-vous comprendre que vos éléments tels que les images peuvent avoir besoin d'une taille deux fois plus grande. Si vous regardez la série iPhone, tous leurs appareils disent que la largeur de l'écran en pixels CSS est de 320 pixels, même si nous savons que ce n'est pas vrai.
Par conséquent, si vous avez créé un bouton pour qu'il soit 22px dans l'espace CSS, la représentation sur l'écran physique est de 22 * ratio de pixels de l'appareil. En fait, je dis ceci, ce n'est pas exactement cela parce que le rapport de pixels de l'appareil n'est jamais exact non plus, les fabricants de téléphones le définissent sur un bon nombre comme 2.0, 3.0 plutôt que 2.1329857289918 ....
En résumé, les pixels CSS sont indépendants de l'appareil et nous ne devons pas nous soucier des tailles physiques des écrans et des densités d'affichage, etc.
La morale de l'histoire est la suivante: ne vous inquiétez pas de comprendre la taille physique des pixels de l'écran. Vous n'en avez pas besoin. 50px devrait être à peu près le même sur tous les appareils mobiles, cela peut varier un peu, mais le CSS Pixel est notre moyen indépendant de l'appareil de créer des documents et des interfaces utilisateur cohérents.
Ressources: