Comprobador de relación de píxeles del dispositivo (DPR)
Consulta al instante la relación de píxeles de tu dispositivo, el viewport CSS, la resolución de pantalla en píxeles CSS y físicos, la profundidad de color y las características de media queries, actualizados en vivo cuando haces zoom o cambias el tamaño de la ventana. Añade el tamaño de tu pantalla para obtener su densidad de píxeles (PPI). No se envía nada a ningún sitio.
Última actualización:
Calculadora de PPI de pantalla
Tu resolución física ya está rellenada. Introduce el tamaño de la diagonal de tu pantalla (o toca un tamaño común) para obtener su densidad de píxeles.
Características de medios
| Característica de medios | Tu valor |
|---|
Cómo usar Comprobador de relación de píxeles del dispositivo (DPR)
- Consulta la relación de píxeles de tu dispositivo en la parte superior: se actualiza al instante cuando haces zoom en la página o arrastras la ventana a otro monitor.
- Revisa los detalles: viewport, resolución de pantalla en píxeles CSS y físicos, profundidad de color, orientación y características de medios.
- Calcula los PPI: la resolución se rellena a partir de tu pantalla; introduce la diagonal en pulgadas (o toca un tamaño común) y pulsa Calcular PPI.
- Copia el informe para compartir los datos de tu pantalla con un desarrollador o con el equipo de soporte.
Píxeles CSS, píxeles del dispositivo y DPR
Los sitios web se maquetan en píxeles CSS, una unidad que mantiene aproximadamente el mismo tamaño visual en todos los dispositivos. La pantalla en sí está formada por píxeles del dispositivo (físicos). La relación de píxeles del dispositivo une ambos:
device pixels = CSS pixels × devicePixelRatio- Un teléfono con un viewport CSS de 390 × 844 y DPR 3 dibuja la página con 1170 × 2532 píxeles físicos.
- Un portátil con Windows y un panel de 1920 × 1080 con escalado de pantalla al 125% indica una pantalla CSS de 1536 × 864 y un DPR de 1.25.
- El zoom del navegador multiplica el DPR en escritorio: un MacBook con DPR 2 y zoom al 110% indica 2.2.
Los desarrolladores usan el DPR para servir imágenes nítidas (srcset con fuentes 2x y 3x, o la media query resolution) y para dimensionar elementos canvas: fija el ancho del canvas en cssWidth × devicePixelRatio y escala el contexto de dibujo para evitar gráficos borrosos.
Fórmula de PPI y ejemplos
La densidad de píxeles en píxeles por pulgada es la resolución diagonal dividida entre el tamaño de la diagonal: PPI = √(width² + height²) ÷ diagonal. El tamaño de punto (dot pitch), la distancia entre los centros de los píxeles, es 25.4 ÷ PPI milímetros.
| Pantalla | Resolución | PPI | DPR típico |
|---|---|---|---|
| Monitor Full HD de 24″ | 1920 × 1080 | 91.8 | 1 |
| Monitor QHD de 27″ | 2560 × 1440 | 108.8 | 1 |
| Monitor 4K de 27″ | 3840 × 2160 | 163.2 | 1.5 o 2 |
| Portátil Full HD de 15.6″ | 1920 × 1080 | 141.2 | 1.25 |
| Portátil de 13.3″ con 2560 × 1600 | 2560 × 1600 | 227.0 | 2 |
| Teléfono de 6.1″ | 1170 × 2532 | 457.3 | 3 |
La resolución física que muestra esta herramienta es tamaño de pantalla × DPR, así que compruébala con el zoom del navegador al 100%. Para medir objetos reales en tu pantalla, calibra la regla online; para una visión más amplia de tu pantalla, consulta Cuál es mi resolución de pantalla.
Características de medios explicadas
- hover / pointer:
hover: hoverconpointer: finesuele indicar un ratón o un trackpad;hover: noneconpointer: coarseindica una pantalla táctil. Las versionesany-comprueban todas las entradas conectadas. - prefers-color-scheme, prefers-reduced-motion, prefers-contrast: reflejan los ajustes de accesibilidad y de tema de tu sistema operativo.
- color-gamut:
srgbes el estándar,p3indica una pantalla de gama amplia (la mayoría de los dispositivos Apple recientes y muchos teléfonos OLED) yrec2020es aún más amplia. - dynamic-range: high significa que el navegador y la pantalla pueden mostrar contenido HDR.
Preguntas frecuentes
¿Qué es la relación de píxeles del dispositivo (DPR)?
La relación de píxeles del dispositivo es el número de píxeles físicos de la pantalla que se usan para dibujar un píxel CSS. Un DPR de 1 significa un píxel del dispositivo por cada píxel CSS, mientras que un DPR de 2 (habitual en pantallas Retina y de alta densidad) significa que cada píxel CSS ocupa 2 × 2 píxeles del dispositivo, lo que hace que el texto y las imágenes se vean más nítidos.
¿Por qué cambia la relación de píxeles de mi dispositivo al hacer zoom?
En los navegadores de escritorio, el zoom de la página cambia la relación de píxeles: con un zoom del 150% en un monitor de DPR 1, la relación pasa a 1.5, porque cada píxel CSS ahora ocupa 1.5 píxeles del dispositivo. El escalado de pantalla del sistema operativo (por ejemplo, 125% en Windows) también se refleja en el DPR. El zoom con los dedos en los teléfonos no cambia el DPR; se muestra aparte como la escala del visual viewport.
¿Cómo calculo los PPI de mi pantalla?
PPI (píxeles por pulgada) = √(ancho² + alto²) ÷ diagonal en pulgadas, usando la resolución física. Por ejemplo, un monitor de 27 pulgadas y 2560 × 1440 tiene √(2560² + 1440²) ÷ 27 ≈ 108.8 PPI. Introduce la diagonal de tu pantalla en la calculadora y ella hará las cuentas por ti.
¿La resolución física que se muestra es siempre exacta?
Es una estimación: el ancho y el alto de la pantalla en píxeles CSS multiplicados por la relación de píxeles del dispositivo. Es exacta con el zoom del navegador al 100% en la mayoría de los dispositivos, pero si tienes zoom aplicado o tu sistema usa escalado fraccionario, el resultado puede diferir ligeramente de la resolución nativa del panel. Restablece el zoom con Ctrl+0 (Cmd+0 en Mac) para obtener el valor más preciso.
¿Qué DPR tienen los dispositivos más comunes?
La mayoría de los monitores de escritorio estándar tienen 1, muchos portátiles con Windows 1.25 o 1.5, los MacBook y los iPad 2, la mayoría de los iPhone 2 o 3, y muchos teléfonos Android entre 2.625 y 4. Las pantallas con DPR alto necesitan imágenes de mayor resolución (por ejemplo, fuentes 2x o 3x en srcset) para verse nítidas.
¿Qué significa una profundidad de color de 24 o 30?
La profundidad de color es el número de bits que se usan para cada píxel. 24 bits significa 8 bits para cada uno de los canales rojo, verde y azul (unos 16.7 millones de colores). 30 bits significa 10 bits por canal, algo habitual en pantallas HDR o de gama amplia.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.