TOOLADEX
light
← Back to Blog

Dimensiones del Navegador: Ver el Viewport y el Tamaño de Pantalla en Tiempo Real

By Tooladex Team •
Dimensiones del navegadorViewportDiseño responsiveHerramientas desarrollador
Dimensiones del Navegador: Ver el Viewport y el Tamaño de Pantalla en Tiempo Real

Necesitas conocer el tamaño de tu viewport o verificar los breakpoints? La herramienta de Browser Dimensions muestra las dimensiones del viewport, ventana y pantalla en tiempo real — y se actualiza automáticamente a medida que redimensionas. Todos los valores se leen desde tu navegador; no se envía ningún dato a ningún servidor.

Ejemplo: Abre la herramienta y redimensiona la ventana de tu navegador. Observa cómo los valores del viewport (interior) y de la ventana (exterior) se actualizan en vivo. Copia la salida JSON completa para documentar dimensiones para especificaciones de diseño o depuración.

¿Qué son las Browser Dimensions?

Las browser dimensions son las medidas en píxeles de la ventana de tu navegador y la pantalla. El viewport es el área visible para el contenido web (excluyendo la barra de direcciones y las barras de desplazamiento). La ventana incluye todo el chrome del navegador. La pantalla refleja tu display físico. Entender estas diferencias ayuda con el diseño responsivo, las consultas de medios y la depuración de problemas de diseño.

La herramienta Tooladex Browser Dimensions lee estos valores directamente de las APIs de JavaScript de tu navegador. Todo se ejecuta localmente; nada se sube o almacena.

¿Por qué usar una herramienta de Browser Dimensions?

Diseño responsivo — Verifica los breakpoints y el comportamiento de las consultas de medios en diferentes tamaños de viewport. Redimensiona la ventana y observa exactamente cuándo cambian los diseños.

Depuración de CSS — Cuando 100vw o 100vh se comportan de manera inesperada (por ejemplo, desplazamiento de la barra de desplazamiento), verifica las dimensiones reales del viewport.

Documentación — Captura los tamaños del viewport para especificaciones de diseño, guías de prueba o informes de errores. Copia la salida JSON para compartir fácilmente.

Pruebas de dispositivos — Compara dimensiones a través de diferentes dispositivos, niveles de zoom y configuraciones de navegador. La relación de píxeles del dispositivo y la profundidad de color están incluidas.

Cómo funciona la herramienta Browser Dimensions

  1. Abre la herramienta en tu navegador. Las dimensiones se cargan automáticamente.
  2. Redimensiona la ventana — los valores se actualizan en tiempo real. No se necesita refrescar.
  3. Revisa las tarjetas — Las dimensiones del Viewport (interior), Ventana (exterior) y Pantalla se muestran con sus correspondientes nombres de propiedades de JavaScript.
  4. Copia el JSON — Haz clic en "Copy JSON" para copiar todas las dimensiones en un formato estructurado.

Viewport vs Ventana vs Pantalla

Viewport (interior) — window.innerWidth × window.innerHeight. El área visible para el contenido web. Excluye la barra de direcciones, las barras de herramientas y las barras de desplazamiento. Esto es lo que las consultas de medios de CSS y 100vw / 100vh suelen referenciar.

Ventana (exterior) — window.outerWidth × window.outerHeight. La ventana completa del navegador incluyendo el chrome. Útil para probar el tamaño de la ventana o el comportamiento de pantalla completa.

Pantalla — screen.width × screen.height. La resolución de tu display físico. screen.availWidth y screen.availHeight excluyen la barra de tareas y otras interfaces de usuario del sistema operativo.

Preguntas Frecuentes

¿Por qué difiere el viewport de la ventana?
El viewport excluye la interfaz de usuario del navegador (barra de direcciones, pestañas, barras de desplazamiento). La ventana incluye todo. En móviles, la barra de direcciones a menudo se oculta al desplazarse, por lo que el viewport puede cambiar.

¿Qué es la relación de píxeles del dispositivo?
La relación de píxeles del dispositivo (DPR) es la relación de píxeles físicos a píxeles CSS. En pantallas Retina o de alta DPI, el DPR puede ser 2 o 3 — un píxel CSS se mapea a múltiples píxeles físicos. Esto afecta la nitidez de la imagen y el renderizado de bordes de 1px.

¿Se envían mis datos a algún lugar?
No. Todos los valores de dimensión se leen localmente en tu navegador. Nada se sube o almacena.

Privacidad

Todo el procesamiento se realiza en tu navegador. No enviamos ni almacenamos ningún dato de dimensión.

Prueba la herramienta Browser Dimensions

Browser Dimensions

View your browser viewport, window, and screen dimensions in real time. Perfect for responsive design, breakpoint testing, and CSS media queries. Updates as you resize.

Try Tool Now

The Browser Dimensions tool is free, works in your browser, and requires no sign-up. Open it, resize your window, and get live viewport, window, and screen dimensions — perfect for responsive design and breakpoint testing.

Related Tools