Píxeles físicos vs píxeles lógicos: guía interactiva con los valores reales de tu pantalla
Tu pantalla — detección en vivo:
Configuras tu monitor a 3840×2160, pero screen.width en JavaScript dice 2560 (y screen.height dice 1440). Haces una captura de pantalla — 3840 píxeles de ancho. Escribes width: 100px en CSS y se renderiza como 200 píxeles físicos. ¿Qué está pasando?
Tu pantalla ejecuta en realidad dos sistemas de resolución — píxeles físicos (puntos de hardware reales) y píxeles lógicos (lo que usa el software para el diseño). La proporción entre ambos es el Device Pixel Ratio (DPR), y afecta a absolutamente todas las coordenadas de tu pantalla. Tus valores reales están arriba.
Abrir herramienta gratuita de coordenadas de pantallaLos valores de tu pantalla — en vivo
Antes de entrar en teoría, aquí tienes los valores reales de tu pantalla ahora mismo:
Estos valores provienen directamente de las APIs de tu navegador — sin estimaciones. La resolución física "estimada" se calcula como screen.width × DPR y screen.height × DPR; coincide con el hardware real en la mayoría de casos, pero puede verse afectada por la superresolución virtual de la GPU o el zoom del navegador. Si el DPR es 1.0, tus píxeles físicos y lógicos son idénticos. Si es mayor, hay una transformación ocurriendo entre lo que ve el software y lo que muestra tu pantalla. Usa nuestra herramienta de coordenadas de pantalla para ver cómo esto afecta a las posiciones del ratón en tiempo real.
¿Qué son los píxeles físicos?
Un píxel físico (también llamado píxel de dispositivo) es un único punto real en el hardware de tu pantalla. Es el elemento más pequeño direccionable de tu pantalla. En un panel LCD, cada píxel físico está compuesto por tres subpíxeles (rojo, verde, azul) que juntos producen un punto de color.
La resolución física de tu monitor te dice exactamente cuántos de estos puntos tiene:
- Un monitor de 1920×1080 tiene 2.073.600 píxeles físicos
- Un monitor de 3840×2160 (4K) tiene 8.294.400 píxeles físicos
- Un iPhone 15 Pro tiene 2.556×1.179 píxeles físicos en una pantalla de 6,1 pulgadas
Los píxeles físicos nunca cambian para una pantalla dada. Un monitor 4K siempre tiene 3840×2160 píxeles físicos independientemente de la configuración de escalado de Windows. El hardware es fijo.
Para una comparativa de lo que significan distintas cantidades de píxeles físicos para los sistemas de coordenadas, consulta nuestra guía de comparativa de resoluciones.
¿Qué son los píxeles lógicos (píxeles CSS)?
Un píxel lógico (también llamado píxel CSS, píxel independiente del dispositivo (DIP) o point en macOS) es una unidad de medida que el software usa para el diseño. Es una abstracción — un píxel lógico no es necesariamente un píxel físico.
En un monitor estándar de 1080p al 100 % de escalado, un píxel lógico = un píxel físico. Simple. Pero en un MacBook Pro Retina con DPR 2, un píxel lógico = una cuadrícula de 2×2 píxeles físicos (4 píxeles físicos en total). En una pantalla 4K de Windows al 150 % de escalado, un píxel lógico = un área de 1,5×1,5 píxeles físicos.
Por qué existen los píxeles lógicos: Sin ellos, un botón configurado a 100×30 píxeles se vería diminuto en una pantalla 4K de teléfono (donde los píxeles son microscópicos) pero enorme en un proyector de 720p. Los píxeles lógicos permiten a los desarrolladores escribir width: 100px y que se vea con un tamaño físico similar en cualquier dispositivo, independientemente de la densidad de píxeles.
Comparación visual — cada cuadrado de color es un píxel físico. Un píxel lógico se mapea a distintas cuadrículas según el DPR:
DPR 1 (1 px CSS = 1×1)
DPR 1,5 (1 px CSS = 1,5×1,5)
DPR 2 (1 px CSS = 2×2)
DPR 3 (1 px CSS = 3×3)
Device Pixel Ratio: el puente entre lo físico y lo lógico
El Device Pixel Ratio (DPR) es el multiplicador que convierte entre píxeles lógicos y físicos:
píxeles_físicos = píxeles_lógicos × DPR
Ejemplos (solo anchura):
1920 lógicos × DPR 1.0 = 1920 físicos (1080p estándar)
2560 lógicos × DPR 1.5 = 3840 físicos (4K al 150 % de escalado)
1440 lógicos × DPR 2.0 = 2880 físicos (MacBook Retina)En JavaScript, puedes leer tu DPR con window.devicePixelRatio. Este valor es de solo lectura — lo determinan el hardware de tu pantalla y la configuración de escalado del sistema operativo.
El DPR no siempre es un número entero
Windows suele usar valores fraccionarios de DPR: 1,25 (125 %), 1,5 (150 %), 1,75 (175 %). macOS usa exactamente 2,0 para las pantallas Retina. Los dispositivos Android usan varios valores (1,5, 2,0, 2,625, 3,0, 3,5, 4,0). Un DPR fraccionario significa que los píxeles lógicos no se mapean de forma limpia a píxeles físicos — un píxel lógico puede cubrir partes de varios píxeles físicos, por eso el renderizado de texto en Windows al 125 % puede verse ligeramente borroso.
Para saber cómo el DPR interactúa con el escalado DPI en Windows y rompe los scripts de automatización, consulta nuestra guía de escalado DPI y coordenadas.
DPR por dispositivo: MacBook, Windows, Android, iPhone
Dispositivos habituales y sus valores de DPR:
| Dispositivo | Resolución física | Resolución lógica | DPR | 1 píxel CSS = |
|---|---|---|---|---|
| Monitor PC estándar (1080p) | 1920×1080 | 1920×1080 | 1,0 | 1 píxel físico |
| Windows 4K al 150 % | 3840×2160 | 2560×1440 | 1,5 | 2,25 píxeles físicos |
| Windows 4K al 200 % | 3840×2160 | 1920×1080 | 2,0 | 4 píxeles físicos |
| MacBook Pro 14" | 3024×1964 | 1512×982 | 2,0 | 4 píxeles físicos |
| MacBook Pro 16" | 3456×2234 | 1728×1117 | 2,0 | 4 píxeles físicos |
| iPad Pro 11" | 2388×1668 | 1194×834 | 2,0 | 4 píxeles físicos |
| iPhone 15 Pro | 2556×1179 | 393×852 | 3,0 | 9 píxeles físicos |
| Pixel 8 | 2400×1080 | 412×915 | ~2,625 | ~6,9 píxeles físicos |
| Samsung Galaxy S24 | 2340×1080 | 360×780 | ~3,0 | 9 píxeles físicos |
Fíjate en el patrón: Apple se mantiene en DPR enteros (2 o 3). Windows usa valores fraccionarios (1,25, 1,5, 1,75) para un control de escalado más fino. Las aplicaciones y navegadores modernos gestionan el DPR fraccionario sin problemas mediante renderizado subpíxel — solo las aplicaciones antiguas y no conscientes del DPI sufren estiramiento de mapa de bits y se ven borrosas. Android varía según el fabricante.
Qué significa esto para las coordenadas de pantalla y la automatización
Entonces, ¿qué significa esto en la práctica?
- Las herramientas de automatización discrepan en las coordenadas. PyAutoGUI sin conciencia DPI usa coordenadas lógicas; la API de Windows
GetCursorPosdevuelve físicas (para procesos conscientes del DPI). Mezclarlas hace que cada posición esté desplazada por el factor DPR. Nuestra guía de coordenadas con PyAutoGUI tiene la solución. - Las capturas de pantalla capturan píxeles físicos. En una pantalla 4K al 150 % de escalado, una captura es de 3840×2160 — no de 2560×1440. ¿Intentas localizar un elemento de la interfaz por sus coordenadas lógicas en esa captura? Multiplica por DPR primero.
- Las coordenadas CSS son siempre lógicas. Configura
left: 100px; top: 200pxy son píxeles lógicos — el navegador los convierte a píxeles físicos por detrás. Por esogetBoundingClientRect()devuelve píxeles CSS. - Las configuraciones multimonitor pueden tener DPR mixto. Una pantalla de portátil Retina (DPR 2) junto a un monitor externo estándar (DPR 1) significa que la misma coordenada se mapea a puntos físicos diferentes en cada pantalla. Nuestra guía de coordenadas multimonitor lo cubre.
Referencia rápida: ¿qué sistema de coordenadas estoy usando?
| Herramienta / API | Tipo de coordenada | Resolución reportada |
|---|---|---|
| PyAutoGUI (por defecto) | Lógica | Lógica (ej.: 2560×1440) |
| PyAutoGUI (con SetProcessDPIAware) | Física | Física (ej.: 3840×2160) |
| AutoHotkey A_ScreenWidth | Lógica | Lógica |
| Windows GetCursorPos (consciente del DPI) | Física | Física |
| JavaScript screen.width/height | Lógica (CSS) | Lógica |
| JavaScript window.innerWidth | Lógica (CSS) | Lógica |
| CSS getBoundingClientRect() | Lógica (CSS) | N/A |
| macOS NSScreen (Quartz) | Puntos (lógica) | Puntos |
Preguntas frecuentes
¿DPR es lo mismo que DPI?
Están relacionados pero son cosas distintas. DPI (puntos por pulgada) mide la densidad física de píxeles — cuántos píxeles caben en una pulgada de pantalla. DPR (proporción de píxeles del dispositivo) es la relación entre píxeles físicos y lógicos. Una pantalla de alto DPI puede tener un DPR de 1 si el sistema operativo no la escala. El DPR trata del mapeo de software; el DPI trata de la densidad del hardware.
¿Por qué mi Mac Retina se ve más nítida que mi PC 4K con Windows?
macOS usa DPR entero (2,0), lo que significa que cada píxel CSS se mapea exactamente a una cuadrícula de 2×2 píxeles físicos — un mapeo limpio de 4:1. Windows suele usar DPR fraccionario (1,25, 1,5, 1,75), lo que significa que un píxel CSS se mapea a un número no entero de píxeles físicos. Esto causa artefactos de renderizado subpíxel y ligera borrosidad en aplicaciones no conscientes del DPI.
¿Puedo cambiar mi DPR?
Lo cambias indirectamente a través de la configuración de escalado del sistema operativo. En Windows: Configuración → Sistema → Pantalla → Escala y diseño. En macOS: Configuración del Sistema → Pantallas → elige "Predeterminada" para el DPR nativo o "Escalada" para una resolución lógica diferente. En Android: Configuración → Pantalla → Tamaño de pantalla / Tamaño de fuente (control limitado). El DPR cambia al instante, pero algunas aplicaciones necesitan reiniciarse para detectar el cambio.
¿Por qué window.devicePixelRatio cambia entre monitores?
Si arrastras tu navegador de un monitor externo con DPR 1,0 a una pantalla de portátil Retina con DPR 2,0, window.devicePixelRatio se actualiza para reflejar el DPR del nuevo monitor. Puedes escuchar este cambio con el evento matchMedia('(resolution: ' + dpr + 'dppx)'). Esto es relevante para aplicaciones web que necesitan gestionar configuraciones con DPI mixto.