Dimensiones del Navegador
Ve las dimensiones del viewport, ventana y pantalla de tu navegador en tiempo real. Perfecto para diseño responsivo, pruebas de breakpoints y media queries CSS. Se actualiza automáticamente al redimensionar la ventana.
Loading dimensions…
JavaScript is required. This tool runs entirely in your browser.
Tabla de Contenidos
¿Qué son las Dimensiones del Navegador?
Las dimensiones del navegador son las medidas en píxeles de tu ventana de navegador y pantalla. Esta herramienta muestra el viewport (el área donde el contenido web es visible), la ventana (incluido el chrome del navegador) y la pantalla (tu pantalla). Se actualiza en tiempo real al redimensionar la ventana.
Todos los valores se leen desde las APIs de JavaScript de tu navegador. No se envían datos a ningún servidor.
Viewport vs Ventana vs Pantalla
- Viewport (interno): El área visible para el contenido web — excluye la barra de dirección, barras de herramientas y barras de desplazamiento. Úsalo para el diseño responsivo y el comportamiento de 100vw / 100vh.
- Ventana (externa): La ventana completa del navegador incluyendo el chrome. Útil al probar el tamaño de la ventana o el comportamiento de pantalla completa.
- Pantalla: La resolución de tu pantalla física. screen.availWidth y screen.availHeight excluyen las barras de tareas y la UI del sistema operativo.
Casos de Uso Comunes
- Diseño responsivo: Verifica breakpoints y el comportamiento de media queries a diferentes tamaños de viewport.
- Depuración CSS: Verifica las dimensiones reales del viewport cuando 100vw o 100vh se comportan inesperadamente.
- Documentación: Captura tamaños de viewport para especificaciones de diseño o guías de pruebas.
- Pruebas de dispositivos: Compara dimensiones entre diferentes dispositivos y niveles de zoom.
Preguntas Frecuentes
El viewport excluye la UI del navegador (barra de dirección, pestañas, barra de favoritos, barras de desplazamiento). La ventana incluye todo. En dispositivos móviles, la barra de dirección a menudo se oculta al desplazarse, por lo que el viewport puede cambiar.
La relación de píxeles del dispositivo (DPR) es la proporción de píxeles físicos a píxeles CSS. En una pantalla 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 las imágenes y la representación de bordes de 1px.
No. Todos los valores de dimensión se leen localmente en tu navegador. Nada se sube ni se almacena.