¿Cuál es mi resolución de pantalla?
Ve tu resolución de pantalla y el tamaño de ventana actualizarse en directo al redimensionar.
Este comprobador muestra tu resolución de pantalla en píxeles, el tamaño de la ventana de tu navegador (el viewport), tu device pixel ratio, tu profundidad de color y tu orientación actual. Todo se actualiza en directo: arrastra la ventana para hacerla más pequeña o gira una tablet y los números cambian mientras miras. Es la forma rápida de conseguir las cifras exactas para un informe de error, una prueba de diseño responsive o una conversación con soporte.
Los números salen directamente de tu navegador y tu dispositivo, leídos con JavaScript. No se envía nada a un servidor y no se guarda nada, así que la lectura que ves es simplemente lo que informa tu propia pantalla.
Estas tres cifras suelen confundirse, así que la herramienta las muestra una al lado de otra. La resolución de pantalla es el tamaño completo en píxeles de tu monitor. El viewport es solo el área visible en la que puede dibujar tu página web, que es menor por las barras del navegador y por el zoom. El device pixel ratio es cuántos píxeles físicos hay detrás de cada píxel CSS, el motivo por el que un portátil o un móvil de alta densidad se ve nítido.
Cómo comprobar tu resolución de pantalla
- Abre la página. Tu resolución de pantalla y el tamaño del viewport aparecen de inmediato.
- Lee debajo el device pixel ratio, la profundidad de color y la orientación.
- Redimensiona la ventana de tu navegador y observa cómo se actualizan las cifras del viewport en directo.
- En un móvil o una tablet, gira el dispositivo para ver cambiar la orientación y los tamaños.
- Copia los valores que necesites para tu informe de error o tu prueba de diseño.
Resolución frente a viewport frente a device pixel ratio
Imagina que un portátil informa de una resolución de pantalla de 1920 por 1080 pero de un viewport de 1200 por 700. La diferencia es la interfaz del navegador, la barra de tareas del sistema operativo y el zoom de la página, que se comen el espacio que tu página recibe de verdad. Cuando construyes un diseño responsive, el viewport es la cifra que decide qué breakpoint se aplica, no la resolución de pantalla.
El device pixel ratio explica por qué un móvil que presume de un enorme recuento de píxeles se distribuye como una pantalla mucho más pequeña. Un ratio de 2 significa que cada píxel CSS se dibuja con un bloque de 2 por 2 píxeles físicos, dando texto nítido sin encoger todo. La profundidad de color, normalmente de 24 bits, indica cuántos colores puede mostrar la pantalla, y la orientación alterna entre vertical y horizontal al girar el dispositivo.
Qué significa cada valor de la página
La resolución de pantalla se informa como ancho por alto en píxeles CSS para todo tu monitor. El viewport es el ancho y el alto del área que tu contenido web puede usar de verdad dentro de la ventana actual. El device pixel ratio es el multiplicador entre los píxeles CSS y los físicos. La profundidad de color es el número de bits usados por píxel para el color, y la orientación indica si el borde más corto o el más largo está actualmente en horizontal.
Vistos en conjunto, describen tanto el lienzo que ofrece tu pantalla como la porción más pequeña que se le entrega a una página web en este momento. Esa distinción es todo el sentido de la herramienta: la gente suele decir «resolución de pantalla» cuando el número que gobierna cómo se ve un sitio para ellos es en realidad el viewport, así que mostrar ambos evita de un vistazo el malentendido más común.
Píxeles CSS frente a la resolución nativa de tu panel
Aquí está la honestidad que la mayoría de los comprobadores se salta: el navegador informa de los valores en píxeles CSS, que son una abstracción de software, no necesariamente la rejilla física de píxeles de tu panel. En una pantalla de alta densidad, el navegador informa a propósito de una resolución «lógica» más pequeña y la empareja con un device pixel ratio por encima de 1, así que un portátil cuyo panel es físicamente de 2560 por 1600 puede informar de 1280 por 800 con un ratio de 2. Multiplica el tamaño informado por el pixel ratio para estimar la rejilla física.
El escalado de pantalla del sistema operativo añade otra capa. Si configuras Windows o macOS para escalar la interfaz, la resolución CSS que informa el navegador refleja ese ajuste escalado y no el máximo real del panel. Así que la cifra de aquí responde a «qué ve el navegador», que es lo que importa para el diseño web, y puede diferir legítimamente de la resolución nativa impresa en la ficha técnica de tu monitor.
Cuándo son útiles estos números
Para el desarrollo web responsive esta herramienta es una comprobación de realidad rápida. Puedes arrastrar la ventana y ver exactamente dónde se disparan tus breakpoints de CSS, confirmar que una media query se activa al ancho de viewport que pretendías y conseguir las dimensiones precisas en las que un diseño empieza a romperse. Hacerlo en un navegador real detecta cosas que un ajuste fijo de emulador puede pasar por alto.
Es igual de valiosa en soporte e informes de errores. Un fallo visual que solo aparece a cierto tamaño de ventana o pixel ratio es mucho más fácil de reproducir cuando quien lo reporta incluye su viewport, su resolución y su device pixel ratio. En lugar de describir una pantalla con palabras, un usuario puede copiar las cifras exactas, dando al desarrollador una configuración que puede igualar de inmediato.
Interpretar el pixel ratio y los breakpoints
Una trampa común es suponer que un dispositivo con un gran recuento de píxeles anunciado necesita un diseño de escritorio. Normalmente no: un móvil puede tener millones de píxeles físicos pero presentar un viewport de solo unos cientos de píxeles CSS de ancho, porque el alto pixel ratio se gasta en nitidez, no en espacio de diseño extra. Diseña siempre contra el ancho del viewport, y deja que el pixel ratio se ocupe de la nitidez de las imágenes por separado.
Eso también orienta cómo sirves las imágenes. En una pantalla que informa de un device pixel ratio de 2 o 3, una imagen de resolución estándar puede verse borrosa, y por eso las imágenes responsive ofrecen variantes de mayor resolución para pantallas de alta densidad. Leer tu propio ratio aquí hace concreto el concepto: es el multiplicador exacto que usaría un sitio para decidir si enviarte un recurso más nítido.
Límites y precisión
Como el navegador expone píxeles CSS moldeados por el escalado del SO y el zoom, la resolución informada no es una lectura directa del hardware de tu panel. El zoom de página en particular desplaza las cifras del viewport, así que si los números parecen raros, comprueba que tu zoom esté al 100 por cien. Nada de esto es un error; es simplemente el navegador informando del sistema de coordenadas que realmente usa para maquetar las páginas.
Los valores también pueden redondearse o limitarse por privacidad en algunos navegadores, y las configuraciones multimonitor informan de la pantalla en la que se encuentra la ventana en ese momento y no de todo el escritorio. Trata la lectura como una descripción precisa de la vista actual del navegador, que es a lo que responden las páginas web, en lugar de como una especificación definitiva del hardware de tu monitor.
Herramientas de navegador relacionadas
El comprobador de User Agent es el compañero evidente, ya que una cadena de navegador más las dimensiones de tu pantalla y viewport describen juntas el entorno al que se adapta un sitio web. Cuando un diseño se porta mal, aportar ambos es la forma más rápida de que un desarrollador reproduzca exactamente lo que ves, y ambas herramientas leen puramente del navegador sin enviar nada.
Si un problema de visualización o de carga resulta ser de tu conexión y no de tu pantalla, las herramientas ¿Cuál es mi IP?, Localización de IP y Consulta DNS cubren el lado de la red. Tener el conjunto completo a mano significa que puedes distinguir rápido si un problema vive en tu navegador, en tu dispositivo o en la ruta de red hacia un sitio.
Preguntas frecuentes
¿Es gratis esta herramienta de resolución de pantalla?
Sí, gratis, sin registro y sin límites. Ábrela siempre que necesites las cifras.
¿Por qué mi viewport es más pequeño que mi resolución de pantalla?
El viewport es solo el área en la que puede dibujar tu página web. Las barras del navegador, la barra de tareas del SO y el zoom lo reducen, así que normalmente es más pequeño que la resolución de pantalla completa.
¿Qué es el device pixel ratio?
Es cuántos píxeles físicos hay detrás de cada píxel CSS. Un ratio de 2 o 3, habitual en móviles modernos y portátiles de alta densidad, es lo que hace que el texto y las imágenes se vean nítidos.
¿Se actualizan los números al redimensionar la ventana?
Sí. El tamaño del viewport, la orientación y los valores relacionados se actualizan en directo al arrastrar la ventana o girar el dispositivo, así que puedes ver los breakpoints cambiar en tiempo real.
¿Se envía esta información a algún sitio?
No. Cada valor se lee de tu navegador y tu dispositivo en local con JavaScript. No se sube ni se guarda nada, así que la herramienta es segura de usar en cualquier parte.
¿Funciona en móviles y tablets?
Sí. Funciona en cualquier navegador móvil moderno y ahí resulta muy útil, ya que puedes girar el dispositivo y ver cambiar la resolución, el viewport y la orientación.