Cómo comprobar tu resolución de pantalla
- Abre esta página, la detección se ejecuta en cuanto carga, así que tu resolución de pantalla aparece en letra grande arriba de inmediato.
- Lee los detalles de abajo, el tamaño del viewport, el device pixel ratio, la profundidad de color, la relación de aspecto y la orientación se listan con una nota en lenguaje claro que explica qué significan.
- Redimensiona la ventana del navegador y observa cómo el tamaño del viewport se actualiza en vivo, mientras la resolución de pantalla no cambia, una forma rápida de ver la diferencia entre ambos.
- Pulsa “Copy report” para copiar al portapapeles un resumen limpio en texto plano de cada valor, listo para pegar en un ticket de soporte, un informe de error o un brief de diseño web.
Todo se lee dentro de tu pestaña, nada se envía a un servidor, se registra ni se almacena.
Resolución de pantalla frente a tamaño del viewport, la distinción que confunde a todos
La confusión más habitual es tratar la “resolución de pantalla” y el “tamaño del navegador” como el mismo número. No lo son, y saber cuál es cuál ahorra mucho tiempo de depuración:
- La resolución de pantalla es todo tu monitor,
screen.width×screen.height. En un monitor 1080p típico eso es 1920 × 1080. Rara vez cambia salvo que cambies el modo de pantalla. - El tamaño del viewport es solo el área en la que tu página web puede dibujar de verdad,
window.innerWidth×window.innerHeight. Se reduce cuando la ventana no está maximizada, cuando las herramientas de desarrollo se abren a un lado, o cuando haces zoom. Es la cifra que importa para el diseño responsive y las media queries de CSS, y es la que esta herramienta actualiza en vivo al redimensionar.
Si un diseño “se rompe a cierto ancho”, es el ancho del viewport (no la resolución de pantalla) al que reaccionan tus media queries. Por eso un sitio puede verse bien a pantalla completa y romperse en una ventana más pequeña en el mismo monitor.
Por qué importan el device pixel ratio y los píxeles físicos
Los móviles y portátiles modernos meten muchos más píxeles físicos en el mismo espacio, y el navegador oculta esto tras los píxeles CSS para que el texto mantenga un tamaño cómodo. El puente entre ambos es el device pixel ratio. Un valor de 2 significa que cada píxel CSS se dibuja con un bloque de 2 × 2 píxeles reales, así que una pantalla informada como 1440 × 900 está moviendo en realidad unos 2880 × 1800. Calculamos una resolución física estimada multiplicando las dimensiones informadas por el DPR, y la etiquetamos como estimación porque el navegador solo expone píxeles CSS, no le dice a una página web la rejilla nativa real del panel. Esa estimación sigue siendo útil cuando necesitas saber por qué las imágenes se ven nítidas, o por qué una resolución “pequeña” mueve una pantalla muy nítida.
Usos habituales
- Responder a informática o soporte cuando preguntan “¿a qué resolución trabajas?”, copia el informe y pégalo.
- Diseño web y QA, confirma el ancho de viewport que ve un visitante real y comprueba cómo responde tu diseño al cambiar la ventana.
- Comprar o comparar monitores, coteja tu resolución y relación de aspecto actuales con la tabla de referencia de resoluciones comunes.
- Solucionar una interfaz borrosa o diminuta, un vistazo al device pixel ratio explica mucho.
Tus datos nunca salen de tu dispositivo
Esto es una lectura, no un rastreador. Cada campo viene directamente de las propiedades estándar window y screen de tu navegador y se muestra solo a ti; el botón de copiar reúne exactamente esos campos visibles y nada más. No hay subida ni llamada de analítica, la página no hace ninguna petición de red con tu información. Una advertencia honesta: estas métricas de pantalla forman parte de lo que hace que un navegador sea identificable por fingerprinting, y esta herramienta las muestra en vez de protegerlas. Para comprobaciones relacionadas, prueba la herramienta qué navegador estoy usando, el test de tasa de refresco y la calculadora de relación de aspecto.
