Píxeles CSS frente a píxeles físicos

Los píxeles CSS son unidades lógicas utilizadas por navegadores y sistemas de diseño. Los píxeles físicos son los puntos de hardware reales en una pantalla. En los dispositivos modernos, estos valores a menudo no son los mismos, por lo que una coordinada puede parecer incorrecta si se comparan diferentes herramientas sin tener en cuenta la escala.

Si está creando interfaces, revisando capturas de pantalla o comprobando objetivos de clic, necesita saber si los valores de sus coordenadas están vinculados a la lógica de visualización o a los píxeles del hardware.

Por qué es importante la diferencia

Un navegador puede informar posiciones basadas en CSS mientras el propio dispositivo renderiza con una resolución física más densa. Eso significa que el mismo punto visible puede producir diferentes valores de coordenadas según el modo de medición que elija.

Ejemplo sencillo

Una pantalla puede parecer de 1000 píxeles de ancho para el navegador, pero en realidad tiene 2000 píxeles físicos de ancho. En ese caso, un punto reportado en X=500 en píxeles CSS puede corresponder aproximadamente a X=1000 en píxeles físicos.

Guías relacionadas

Abre la herramienta | Cómo afecta la escala de DPI a las coordenadas | Coordenadas de pantalla para Mac