Gratis y centrado en la privacidad

¿Cuál es mi Resolución de Pantalla?

Última actualización:

Comprueba pantalla, viewport, DPR, zoom y breakpoints responsive en una herramienta móvil que mantiene todo local en el navegador.

Se ejecuta localmente en su navegador. Sus datos no salen del dispositivo.

Que resuelve esta herramienta

Que resuelve esta herramienta

Muchas páginas sobre "cuál es mi resolución de pantalla" se quedan en ancho, alto y DPR. Eso no basta si estás depurando layouts responsive, comprobando tamaños de captura, explicando el zoom a un cliente o reproduciendo un error móvil. Esta página separa píxeles CSS de pantalla informados, píxeles de dispositivo aproximados, viewport de layout, viewport visual, espacio perdido por la interfaz del navegador y sistemas de breakpoints comunes en un mismo lugar.

Diagnóstico en vivo de navegador y pantalla

Entiende tu pantalla, viewport y DPR en segundos

Consulta al instante los valores que importan para diseño responsive, QA, capturas, comportamiento de zoom y depuración móvil, sin subir nada y sin cambiar de página.

Funciona localmente Actualización instantánea Pensado para móvil
Perfil del dispositivo listo Las mediciones se actualizan cuando cambian el viewport, el zoom o la orientación.

Instantánea del viewport en vivo

La forma más clara de ver tu pantalla actual y tu ventana del navegador

Los primeros valores te dicen qué ancho real tiene la página para maquetar, qué informa el navegador sobre la pantalla y cómo cambia el DPR el conteo efectivo de píxeles.

Viewport (píxeles CSS)

- × - El área de maquetación que la página puede usar ahora mismo.

Píxeles de pantalla aproximados

- × - Píxeles CSS de pantalla informados por el navegador multiplicados por el DPR cómo aproximación a los píxeles físicos.

Pantalla vs. viewport

Pantalla informada - × -
Viewport - × -
Zoom / escala -

El viewport usa el área de la ventana del navegador, no toda la pantalla informada.

Más acciones

Interpretación rápida

Qué significan estos valores ahora mismo

Este panel hace legibles al instante el viewport actual, el DPR y el espacio consumido por la interfaz del navegador incluso en un teléfono.

Interpretación y siguientes pasos

Para desarrolladores

El ancho del viewport suele ser el dato decisivo

Cuando un layout responsive falla, empieza por el ancho del viewport y no por el tamaño bruto de la pantalla. Media queries, breakpoints de frameworks y la mayoría de decisiones responsive se apoyan en el viewport.

Para diseñadores

El DPR afecta a la nitidez, no automáticamente al ancho de layout

Un DPR más alto hace que texto y gráficos se vean más nítidos, pero no significa automáticamente que el layout disponga de más píxeles CSS. Por eso conviene leer DPR y viewport juntos.

Para QA

El zoom y la interfaz del navegador cambian el resultado visible

Dos dispositivos con la misma pantalla informada pueden mostrar áreas útiles diferentes por culpa del zoom, la interfaz del navegador, barras del sistema y la diferencia entre viewport de layout y viewport visual.

Siguientes herramientas

Sigue dentro del mismo flujo de depuración

Después de revisar pantalla y viewport, estas herramientas cercanas ayudan con QA del navegador, comportamiento del dispositivo y traspaso técnico.

Cómo interpretar correctamente el resultado en vivo

Empieza por el ancho del viewport, porque normalmente es el valor que decide media queries y cambios de layout responsive. Después usa tamaño de pantalla y DPR para entender cómo renderiza realmente esos píxeles CSS el dispositivo.

  • Usa <strong>Viewport (píxeles CSS)</strong> cuando quieras saber qué layout responsive está usando de verdad la página.
  • Usa <strong>Píxeles de pantalla aproximados</strong> cuando te importen la nitidez de capturas, la densidad de canvas o la calidad de exportación de imágenes.
  • Usa <strong>Viewport visual</strong> y <strong>Zoom</strong> cuando el área visible cambie sin un resize tradicional.
  • Usa <strong>Diferencia de interfaz del navegador</strong> cuando alguien dice que una página se siente más estrecha en móvil de lo que sugiere el tamaño bruto de la pantalla.

Supuestos

  • Los navegadores informan dimensiones de pantalla mediante APIs orientadas a CSS, no siempre cómo píxeles físicos nativos del panel.
  • Los píxeles de dispositivo aproximados se derivan de <strong>píxeles CSS de pantalla informados × DPR</strong>.
  • Zoom, viewport visual, interfaz del navegador y barras del sistema pueden hacer que el área útil de la página sea menor que la pantalla informada.

Siguiente paso

Explora el siguiente paso

Comprueba pantalla, viewport, DPR, zoom y breakpoints responsive en una herramienta móvil que mantiene todo local en el navegador.

Revisión editorial

Cómo se construyó esta página

Esta página combina la herramienta en vivo, ayuda de entradas, ejemplos trabajados y límites operativos para que ¿Cuál es mi Resolución de Pantalla? sea útil sin depender de anuncios.

Revisado por Klartext Tools frente al flujo actual de ¿Cuál es mi Resolución de Pantalla? el 2026-02-24.

Última actualización:

Usar con criterio

Supuestos

  • Los navegadores informan dimensiones de pantalla mediante APIs orientadas a CSS, no siempre cómo píxeles físicos nativos del panel.
  • Los píxeles de dispositivo aproximados se derivan de píxeles CSS de pantalla informados × DPR .
  • Zoom, viewport visual, interfaz del navegador y barras del sistema pueden hacer que el área útil de la página sea menor que la pantalla informada.

Alcance de la página

Qué cubre esta página

  • Cómo usar la herramienta de forma eficaz
  • Casos de uso de ejemplo
  • Cómo interpretar correctamente el resultado en vivo
  • Casos de uso
  • Buenas prácticas
  • Por qué las métricas de pantalla importan para desarrollo y QA

Ejemplos trabajados

Usuario móvil casual

Quieres conocer la resolución y el viewport útil de tu teléfono para una captura o una configuración de app.

Comprobar primero
Viewport (píxeles CSS)
Después comparar
Píxeles de pantalla aproximados

Usa copiar o compartir directamente desde la tarjeta de resumen.

El viewport te dice cómo maquetan los sitios; los píxeles aproximados ayudan con expectativas de exportación e imagen.

Desarrollador depurando responsive

Necesitas saber por qué una página ha entrado en otro rango de Tailwind o Bootstrap.

Comprobar primero
Ancho actual del viewport
Después abrir
Panel de Breakpoints

Compara el ancho actual con la distancia al siguiente breakpoint.

Es mucho más rápido que traducir anchos mentalmente entre varios frameworks.

Diseñador revisando zoom y espacio visible

Necesitas confirmar cuánto espacio queda realmente visible después del zoom del navegador o de overlays móviles.

Comprobar primero
Viewport visual
Después comparar
Viewport y diferencia de interfaz del navegador

Busca diferencias entre el viewport de layout y el viewport visual.

Esa diferencia suele explicar por qué una página se siente más estrecha de lo esperado.

Cómo usar la herramienta de forma eficaz

Este diseño está pensado para que resuelvas la pregunta principal en pocos segundos desde un teléfono y abras diagnósticos más profundos solo cuando realmente los necesites.

  1. Lee primero el resumen superior

    La primera tarjeta muestra el viewport actual en píxeles CSS, el tamaño aproximado en píxeles de dispositivo y los chips clave cómo clase de dispositivo, orientación, breakpoint, DPR y zoom.

  2. Revisa breakpoints si el layout está cambiando

    Abre el panel de Breakpoints para ver cómo cae el ancho actual en Tailwind, Bootstrap y rangos responsive genéricos.

  3. Usa el historial cuando redimensiones, gires o hagas zoom

    El panel de Historial muestra estados recientes y las instantáneas guardadas te ayudan a dejar notas de QA o evidencia para bugs.

  4. Abre Avanzado solo cuando haga falta

    El panel avanzado añade viewport visual, capacidad de hover y puntero, gama de color, reduced motion, idioma, plataforma y user agent.

Casos de uso de ejemplo

Estos ejemplos cubren los motivos más comunes por los que alguien busca una comprobación de resolución de pantalla o de viewport.

Usuario móvil casual

Quieres conocer la resolución y el viewport útil de tu teléfono para una captura o una configuración de app.

Entradas de ejemplo

Comprobar primero
Viewport (píxeles CSS)
Después comparar
Píxeles de pantalla aproximados

Resultado de ejemplo: Usa copiar o compartir directamente desde la tarjeta de resumen.

El viewport te dice cómo maquetan los sitios; los píxeles aproximados ayudan con expectativas de exportación e imagen.

Desarrollador depurando responsive

Necesitas saber por qué una página ha entrado en otro rango de Tailwind o Bootstrap.

Entradas de ejemplo

Comprobar primero
Ancho actual del viewport
Después abrir
Panel de Breakpoints

Resultado de ejemplo: Compara el ancho actual con la distancia al siguiente breakpoint.

Es mucho más rápido que traducir anchos mentalmente entre varios frameworks.

Diseñador revisando zoom y espacio visible

Necesitas confirmar cuánto espacio queda realmente visible después del zoom del navegador o de overlays móviles.

Entradas de ejemplo

Comprobar primero
Viewport visual
Después comparar
Viewport y diferencia de interfaz del navegador

Resultado de ejemplo: Busca diferencias entre el viewport de layout y el viewport visual.

Esa diferencia suele explicar por qué una página se siente más estrecha de lo esperado.

Cómo leer correctamente resolución de pantalla, viewport y DPR

La resolución de pantalla, el tamaño del viewport y la relación de píxeles suelen mezclarse porque el navegador expone cada valor de forma distinta. Las definiciones siguientes separan estos conceptos para que puedas tomar mejores decisiones de responsive, diseño y QA.

El tamaño de pantalla informado no siempre equivale a los píxeles físicos brutos del panel

Los navegadores suelen exponer ancho y alto de pantalla en valores orientados a CSS. Son útiles, pero no siempre coinciden exactamente con la rejilla nativa de píxeles físicos del panel.

El viewport es el que manda sobre el layout responsive

El viewport es el área que la página puede usar de verdad para maquetar. Por eso suele ser más importante que el tamaño bruto de la pantalla al depurar breakpoints y media queries.

El DPR explica por qué el mismo layout puede verse más nítido

Un DPR de 2 o 3 significa que el navegador usa varios píxeles físicos por cada píxel CSS. El ancho del layout puede mantenerse igual mientras la salida se ve más definida.

Por qué pantalla y viewport no coinciden

La pantalla informada describe el contexto general del display, mientras que el viewport excluye interfaz del navegador, barras del sistema, scrollbars y cualquier elemento que quite espacio real al layout de la página.

Por qué el zoom cambia lo que ves

Al hacer zoom, la página no gana más píxeles CSS. Lo que cambia es la relación entre viewport de layout y viewport visible, lo que puede reducir la zona realmente visible en pantalla.

Por qué detectar breakpoints ahorra tiempo

Saber que un viewport mide 390 px es útil. Saber que además cae en Tailwind base, Bootstrap xs y un rango de teléfono te permite actuar mucho más rápido.

Casos de uso

  • Mide velocidad de escritura, tiempo de reacción y entradas de hardware en el navegador.
  • Revisa pantalla, viewport y DPR sin instalar software.
  • Compara benchmarks repetibles para QA, soporte, gaming y estudio.

Sigue dentro del mismo flujo de depuración

Guías

Ver guías

Páginas para decidir mejor

Explorar biblioteca de aprendizaje

Herramientas y temas

Revisado por Klartext Tools

  • Revisado con el proceso editorial de Klartext Tools para flujos prácticos en el navegador.
  • Los supuestos y límites aparecen en la propia página antes de los bloques de apoyo a la decisión.
  • Incluye ejemplos y FAQ para contrastar el resultado con un segundo escenario.

Preguntas frecuentes

Estas respuestas cubren las búsquedas más habituales alrededor de resolución de pantalla, tamaño de viewport, device pixel ratio y breakpoints responsive.

¿Por qué mi viewport es menor que la resolución de pantalla?
La pantalla informada describe el contexto general del display, mientras que el viewport muestra solo el área que la página puede usar dentro del navegador. La interfaz del navegador, barras del sistema, scrollbars y el zoom pueden reducir el viewport.
¿Cuál es la diferencia entre píxeles de pantalla y píxeles CSS?
Los píxeles CSS son las unidades de layout que el navegador usa para tamaños y media queries. Los píxeles de dispositivo son los píxeles físicos del panel. Las pantallas de alta densidad suelen usar varios píxeles de dispositivo por cada píxel CSS.
¿Cómo compruebo breakpoints responsive de forma rápida?
Empieza por el ancho en vivo del viewport y compáralo con los rangos del framework que usas de verdad. Esta herramienta muestra Tailwind, Bootstrap y rangos responsive genéricos uno al lado del otro.
¿El zoom del navegador cambia el tamaño del viewport?
Sí. El zoom puede cambiar el viewport visible y la relación entre viewport de layout y viewport visual. Por eso esta página enseña ambos valores por separado.
¿Mis mediciones se envían a un servidor?
No. La herramienta lee valores informados por el navegador de forma local y mantiene resúmenes, historial e instantáneas guardadas dentro del navegador salvo que tú decidas copiarlos, compartirlos o exportarlos.
¿Por qué mi teléfono muestra un tamaño de pantalla menor que el de la ficha técnica?
Las fichas técnicas suelen usar píxeles físicos nativos. Los navegadores suelen exponer tamaños de pantalla orientados a CSS, que son más útiles para la lógica de layout. El DPR explica después por qué la salida sigue viéndose nítida.
¿Qué calcula ¿Cuál es mi Resolución de Pantalla? frente a un cuál es mi resolución de pantalla online básico?
¿Cuál es mi Resolución de Pantalla? está diseñado para un caso de uso concreto: Comprueba pantalla, viewport, DPR, zoom y breakpoints responsive en una herramienta móvil que mantiene todo local en el navegador. La herramienta está pensada para flujos de pruebas y diagnósticos en el navegador herramientas y mantiene resultados repetibles cuando trabajas con los mismos datos.
¿Qué entradas cambian más los resultados en cuál es mi resolución de pantalla?
Empieza por los campos de entrada. Cambios pequeños en esos campos suelen mover más la salida, así que conviene comparar al menos dos escenarios antes de decidir.

Recomendaciones entre categorías

Si el problema va más allá de esta categoría, estas herramientas de otras áreas te ayudan con el siguiente paso.