Realmente no puede obtener las dimensiones físicas reales o el DPI real e incluso si pudiera, no puede hacer nada con ellos.
Esta es una historia bastante larga y compleja, así que perdóname.
La web y todos los navegadores definen 1px como una unidad llamada píxel CSS. Un píxel CSS no es un píxel real, sino una unidad que se considera 1/96 de pulgada según el ángulo de visión del dispositivo. Esto se especifica como un píxel de referencia .
El píxel de referencia es el ángulo visual de un píxel en un dispositivo con una densidad de píxeles de 96 ppp y una distancia del lector de la longitud de un brazo. Para una longitud nominal del brazo de 28 pulgadas, el ángulo visual es por lo tanto de aproximadamente 0.0213 grados. Para la lectura con el brazo extendido, 1 px corresponde a aproximadamente 0,26 mm (1/96 pulgada).
En 0,26 mm de espacio, podríamos tener muchos píxeles de dispositivo reales.
El navegador hace esto principalmente por razones heredadas (la mayoría de los monitores tenían 96 ppp cuando nació la web), pero también por coherencia, en los "viejos tiempos", un botón de 22 píxeles en una pantalla de 15 pulgadas a 800 x 600 sería el doble del tamaño de un botón de 22 píxeles en un monitor de 15 pulgadas a 1600x1200. En este caso, el DPI de la pantalla es en realidad 2x (el doble de la resolución horizontalmente pero en el mismo espacio físico). Esta es una mala situación para la web y las aplicaciones, por lo que la mayoría de los sistemas operativos idearon muchas formas de abstraer los valores de píxeles en unidades independientes del dispositivo (DIPS en Android, PT en iOS y CSS Pixel en la web ).
El navegador Safari de iPhone fue el primero (que yo sepa) en introducir el concepto de ventana gráfica. Esto fue creado para permitir que las aplicaciones de estilo de escritorio completo se rendericen en una pantalla pequeña. La ventana gráfica se definió con 960 píxeles de ancho. Básicamente, esto hizo que la página se alejara 3 veces (el iPhone originalmente tenía 320 px), por lo que 1 píxel CSS es 1/3 de un píxel físico. Cuando definió una ventana gráfica, sin embargo, podría hacer que este dispositivo coincidiera con 1 píxel CSS = 1 píxel real a 163 ppp.
Al utilizar una ventana gráfica en la que el ancho es "ancho del dispositivo" te libera de tener que establecer la anchura de la ventana gráfica por dispositivo al tamaño de píxel CSS óptimo, el navegador simplemente lo hace por ti.
Con la introducción de dispositivos de doble DPI, los fabricantes de teléfonos móviles no querían que las páginas móviles parecieran un 50% más pequeñas, por lo que introdujeron un concepto llamado devicePixelRatio (creo que primero en un webkit móvil), esto les permite mantener 1 píxel CSS en aproximadamente 1 /. 96 de pulgada, pero le permite comprender que es posible que sus recursos, como las imágenes, tengan el doble de tamaño. Si observa la serie iPhone, todos sus dispositivos dicen que el ancho de la pantalla en píxeles CSS es 320px , aunque sabemos que esto no es cierto.
Por lo tanto, si hizo que un botón tenga 22 píxeles en el espacio CSS, la representación en la pantalla física es una proporción de píxeles del dispositivo de 22 *. En realidad, digo esto, no es exactamente esto porque la relación de píxeles del dispositivo tampoco es exacta, los fabricantes de teléfonos lo configuran en un buen número como 2.0, 3.0 en lugar de 2.1329857289918 ...
En resumen, los píxeles CSS son independientes del dispositivo y no nos permiten preocuparnos por los tamaños físicos de las pantallas y las densidades de visualización, etc.
La moraleja de la historia es: no se preocupe por comprender el tamaño de píxel físico de la pantalla. No lo necesitas. 50px debe verse aproximadamente igual en todos los dispositivos móviles, puede variar un poco, pero el píxel CSS es la forma independiente de nuestro dispositivo de crear documentos e interfaces de usuario consistentes
Recursos: