Mi resolución de pantalla
Consulta al instante la resolución de tu pantalla, tanto en píxeles físicos como en píxeles CSS, el tamaño de la ventana del navegador, la escala (devicePixelRatio), la orientación, el color y la tasa de refresco en hercios.
- —Pantalla en píxeles CSS
- —Ventana (viewport)
- —devicePixelRatio
- —Tasa de refresco
| Área disponible (sin barra de tareas) | — |
|---|---|
| Ventana sin barra de desplazamiento | — |
| Orientación | — |
| Relación de aspecto | — |
| Profundidad de color | — |
| Gama de color | — |
| Rango dinámico (HDR) | — |
| Pantalla táctil | — |
| Tema del sistema | — |
Los datos se actualizan solos si cambias el tamaño de la ventana, giras el móvil o mueves la ventana a otro monitor.
Cómo leer los resultados
No tienes que hacer nada: la página lee los datos que el navegador expone sobre tu pantalla. Lo importante es distinguir entre tres medidas que a menudo se confunden:
- Resolución física: los píxeles reales del panel (o la resolución configurada en el sistema). Es el dato que aparece en la ficha técnica del monitor o del móvil.
- Resolución en píxeles CSS: la que usan las webs para maquetar. Es la física dividida entre el factor de escala.
- Ventana o viewport: el espacio que ocupa la página dentro del navegador, sin barras ni pestañas. Es lo que importa al diseñar una web adaptable.
Fórmula: píxeles físicos y CSS
Píxeles físicos = píxeles CSS × devicePixelRatio
Ejemplos reales
| Dispositivo | CSS | DPR | Físicos |
|---|---|---|---|
| Monitor Full HD sin escala | 1920 × 1080 | 1 | 1920 × 1080 |
| Portátil Full HD con Windows al 125 % | 1536 × 864 | 1,25 | 1920 × 1080 |
| Portátil Full HD con Windows al 150 % | 1280 × 720 | 1,5 | 1920 × 1080 |
| Monitor 4K con escala al 200 % | 1920 × 1080 | 2 | 3840 × 2160 |
| Móvil de 390 × 844 con DPR 3 | 390 × 844 | 3 | 1170 × 2532 |
Si trabajas con unidades relativas al maquetar, el conversor de px a rem te ayuda a pasar de píxeles CSS a rem, y la calculadora de relación de aspecto a obtener proporciones como 16:9 o 21:9.
Tasa de refresco y profundidad de color
La tasa de refresco se mide contando cuántos fotogramas dibuja el navegador por segundo con requestAnimationFrame. Los valores típicos son 60 Hz (oficina y la mayoría de móviles), 120 Hz (móviles y portátiles recientes), 144, 165 o 240 Hz (monitores gaming). Si tienes un monitor de 144 Hz y sale 60, revisa que el sistema lo tenga configurado a 144 Hz y que el cable (DisplayPort o HDMI moderno) lo permita. Un refresco alto también reduce unos milisegundos tu marca en el test de tiempo de reacción.
La profundidad de color suele ser de 24 bits (8 bits por canal, 16,7 millones de colores). Algunas pantallas HDR declaran 30 bits (10 bits por canal, unos 1.070 millones). La gama de color indica si la pantalla cubre sRGB, Display P3 (más saturada, habitual en Apple y móviles de gama alta) o Rec. 2020.
Nombres de resoluciones comunes
| Nombre | Píxeles | Aspecto |
|---|---|---|
| HD / 720p | 1280 × 720 | 16:9 |
| HD+ (portátiles económicos) | 1366 × 768 | ≈16:9 |
| Full HD / 1080p | 1920 × 1080 | 16:9 |
| WUXGA | 1920 × 1200 | 16:10 |
| QHD / 1440p | 2560 × 1440 | 16:9 |
| UWQHD (ultrapanorámico) | 3440 × 1440 | ≈21:9 |
| 4K UHD | 3840 × 2160 | 16:9 |
Límites de la medición
- Si el zoom del navegador no está al 100 %, los valores en píxeles CSS y el devicePixelRatio cambian. Pulsa Ctrl + 0 (⌘ + 0 en Mac) para restablecerlo.
- La resolución física es la configurada en el sistema. Si usas una resolución inferior a la nativa del panel, verás la configurada.
- Con varios monitores, los datos corresponden al monitor donde está la ventana.
- Algunos navegadores redondean o falsean ciertos valores para dificultar el rastreo (Firefox con protección contra huellas, Tor). Si te interesa qué más revela tu navegador, mira tu user agent.
¿Has comprado un monitor nuevo? Revisa también que no tenga fallos con el test de píxeles muertos.
Preguntas frecuentes
¿Por qué sale 1536 × 864 si mi pantalla es Full HD?
Porque Windows aplica una escala del 125 %. El navegador trabaja en píxeles CSS: 1920 ÷ 1,25 = 1536 y 1080 ÷ 1,25 = 864. La resolución física sigue siendo 1920 × 1080, y así aparece en la línea «Resolución física».
¿Qué es el devicePixelRatio?
Es el número de píxeles físicos que hay en cada píxel CSS. Vale 1 en monitores clásicos, 1,25 o 1,5 con escalado de Windows, 2 en pantallas Retina y 3 en muchos móviles de gama alta.
¿Es exacta la tasa de refresco medida?
Es una medición, no una lectura del hardware: cuenta los fotogramas que dibuja el navegador durante un segundo. Si la pestaña está en segundo plano, el portátil está en ahorro de energía o el sistema limita el refresco, saldrá más baja. Pulsa «Medir de nuevo» con la ventana en primer plano.
¿Cómo veo la resolución en Windows o macOS?
En Windows: clic derecho en el escritorio → Configuración de pantalla → Resolución de pantalla. En macOS: menú Apple → Ajustes del Sistema → Pantallas. Allí también cambias la escala y la frecuencia de actualización.