Conoce la resolución visible de tu navegador en tiempo real
Esta herramienta te muestra al instante el ancho y el alto del viewport del navegador, junto con la densidad de píxel del dispositivo. Viene muy bien para revisar diseños responsive, documentar incidencias visuales y tomar decisiones con datos más claros en proyectos digitales.
Resolución del navegador
Se calcula en tiempo real según el área visible del navegador (viewport).
Ancho (viewport)
–px
Alto (viewport)
–px
Densidad (DPR)
–x
Qué puedes comprobar con esta herramienta
- El ancho visible del navegador en píxeles.
- El alto disponible dentro de la ventana del navegador.
- La densidad de píxel del dispositivo, también conocida como DPR.
- Los cambios al redimensionar la ventana o girar un móvil.
- La diferencia práctica entre resolución de pantalla y viewport del navegador.
- Cómo usar estos datos en diseño web, desarrollo responsive y soporte técnico.
Qué es esta herramienta de resolución del navegador
La herramienta de resolución del navegador de Xenon Factory muestra de forma sencilla el tamaño real del área visible en la que se representa una página web. Más que el tamaño físico del monitor, enseña el espacio útil que el navegador deja a la web en ese momento.
Este detalle importa porque dos usuarios pueden tener la misma pantalla física y ver una web con dimensiones distintas si usan zoom, barras laterales, ventanas reducidas, orientación horizontal o vertical, o escalados diferentes del sistema operativo.
Según la propia página, el cálculo se hace en tiempo real sobre el área visible del navegador o viewport. La interfaz también recomienda redimensionar la ventana o girar el móvil para ver cómo cambian los valores.
Cómo funciona la medición del viewport
El funcionamiento es muy directo. Al entrar en la página, el navegador informa de las dimensiones internas que tiene disponibles para renderizar la web, y la herramienta las muestra como ancho del viewport, alto del viewport y densidad de píxel.
Ancho del viewport
El ancho del viewport indica cuántos píxeles CSS tiene disponibles la página en horizontal. Este dato ayuda a saber qué punto de ruptura responsive se está activando, por ejemplo una versión móvil, tablet, portátil o escritorio.
Alto del viewport
El alto del viewport indica el espacio vertical visible dentro del navegador. Sirve para comprobar si un bloque principal ocupa demasiada altura, si una llamada a la acción queda oculta o si un componente aparece por debajo del primer pantallazo.
Densidad de píxel o DPR
La densidad de píxel, también llamada DPR, ayuda a entender la relación entre píxeles físicos y píxeles CSS. En pantallas de alta densidad, como muchas pantallas Retina o móviles actuales, un píxel CSS puede representarse con más de un píxel físico. MDN define devicePixelRatio como la relación entre la resolución en píxeles físicos y la resolución en píxeles CSS del dispositivo.
Actualización en tiempo real
Uno de sus puntos más útiles es que los valores cambian cuando cambia el contexto de navegación. Si el usuario reduce la ventana, amplía el navegador, gira el móvil o modifica el área disponible, puede ver el nuevo tamaño visible sin instalar extensiones ni abrir herramientas técnicas complejas.
Ventajas de la herramienta
- Es inmediata: muestra los datos esenciales de la ventana del navegador sin configuración previa.
- Se entiende sin perfil técnico: convierte una comprobación técnica en tres datos claros como ancho, alto y DPR.
- Ayuda en desarrollo responsive: permite identificar el tamaño exacto en el que un diseño cambia de comportamiento.
- Facilita documentar incidencias: ayuda a que cliente, diseñador y desarrollador hablen con datos concretos cuando algo no se ve bien.
- Evita confusiones habituales: diferencia la resolución del monitor del espacio real que usa la web dentro del navegador.
- No requiere conocimientos avanzados: cualquier persona puede abrir la página, copiar los valores y compartirlos con el equipo técnico.
Cómo utilizarla correctamente
- Abre la herramienta desde el navegador en el que quieres hacer la comprobación.
- Mira el ancho del viewport para identificar el espacio horizontal disponible.
- Revisa el alto del viewport para valorar el espacio visible antes de hacer scroll.
- Comprueba el DPR para saber si el dispositivo usa una densidad de píxel elevada.
- Redimensiona la ventana si estás en escritorio o gira el móvil si estás en un dispositivo móvil.
- Anota los valores junto con el navegador, el sistema operativo y la URL donde aparece la incidencia.
Para una revisión técnica más completa, estos datos pueden compartirse con un equipo especializado en desarrollo ad hoc de software y aplicaciones web a medida, sobre todo cuando el comportamiento visual depende de integraciones, componentes personalizados o interfaces con reglas responsive específicas.
Para qué se puede usar en distintos escenarios
1. Validación de diseño responsive
Sirve para comprobar la anchura exacta en la que se activa una versión móvil, una distribución en dos columnas o una cabecera adaptada. Así es más fácil detectar saltos visuales, solapamientos, botones cortados o elementos que no responden bien al cambio de tamaño.
2. Control de calidad antes de publicar una web
En una fase de QA permite registrar el tamaño concreto en el que aparece un problema. En vez de decir “se ve mal en móvil”, el equipo puede indicar que la incidencia aparece, por ejemplo, con un viewport concreto y una densidad de píxel determinada.
3. Soporte técnico a clientes
Cuando un cliente avisa de que una web no se ve correctamente, esta herramienta permite pedirle datos objetivos sin obligarle a abrir DevTools. Con el ancho, el alto, el DPR, el navegador y una captura de pantalla, el diagnóstico inicial mejora bastante.
4. Optimización de conversión
En CRO, el alto visible del navegador ayuda a revisar si los mensajes clave, formularios, precios o llamadas a la acción quedan demasiado abajo. Es especialmente útil en landings comerciales, páginas de servicio y fichas de producto.
5. SEO técnico y experiencia de usuario
Aunque la herramienta no mide Core Web Vitals ni sustituye a una auditoría SEO, sí aporta contexto para revisar cómo se presenta una página en distintos tamaños de viewport. Con ese dato se pueden detectar problemas de usabilidad que afecten a la experiencia del usuario.
6. Aplicaciones web y paneles internos
En dashboards, ERPs, CRMs o aplicaciones internas, el espacio visible condiciona mucho la legibilidad de tablas, filtros, menús laterales y módulos de gestión. La herramienta ayuda a validar si una interfaz se adapta bien a distintos contextos de trabajo.
7. Formación y comunicación con equipos no técnicos
También sirve para explicar a clientes o equipos de contenido por qué una web no se comporta igual en todos los dispositivos. El concepto de viewport se entiende mejor cuando se ve cómo cambian los valores al mover la ventana del navegador.
Diferencia entre resolución de pantalla y viewport
La resolución de pantalla suele referirse a los píxeles físicos o lógicos disponibles en el dispositivo. El viewport, en cambio, es el área que el navegador tiene disponible para mostrar una página web. Esta herramienta se centra en el viewport porque ese dato condiciona cómo se aplica el diseño responsive.
MDN explica que window.innerWidth devuelve la anchura interior de la ventana en píxeles, es decir, la anchura del layout viewport. De forma equivalente, window.innerHeight permite obtener la altura interior de la ventana.
Buenas prácticas al interpretar los datos
- No confundas el ancho del viewport con el tamaño comercial de la pantalla.
- No diagnostiques un problema responsive solo por la marca del dispositivo.
- Acompaña los valores con una captura de pantalla cuando informes de una incidencia.
- Indica también el navegador, el sistema operativo y si el zoom está modificado.
- Comprueba el comportamiento al cambiar de orientación en móvil y tablet.
- Usa estos datos como apoyo, no como sustituto de una revisión técnica completa.
Preguntas frecuentes sobre la herramienta de resolución del navegador
¿La herramienta muestra la resolución real de mi monitor?
No exactamente. La herramienta muestra el tamaño visible del navegador, conocido como viewport. Este dato puede coincidir en parte con la resolución disponible, pero no siempre representa la resolución nativa del monitor.
¿Por qué cambia el ancho al redimensionar la ventana?
Porque el navegador tiene más o menos espacio para mostrar la web. Al cambiar el tamaño de la ventana, también cambia el viewport y la herramienta actualiza los valores.
¿Para qué sirve conocer el DPR?
El DPR ayuda a interpretar la densidad de píxeles del dispositivo. Es útil al revisar imágenes, iconos, interfaces nítidas y comportamientos visuales en pantallas de alta densidad.
¿Puede ayudarme a detectar errores en móviles?
Sí. Si una web presenta problemas en móvil, la herramienta muestra el ancho y el alto exactos del viewport. Con esos datos, el desarrollador puede reproducir mejor la incidencia.
¿Sustituye a las herramientas para desarrolladores del navegador?
No. Es una herramienta más sencilla y rápida. Las DevTools siguen siendo necesarias para depurar CSS, JavaScript, rendimiento, red, accesibilidad y comportamiento avanzado.
¿Es útil para revisar una landing page?
Sí. Permite comprobar cuánto contenido se ve antes de hacer scroll, si una llamada a la acción queda visible y si los bloques principales se adaptan bien al tamaño real del navegador.
¿Qué datos debería enviar al equipo técnico junto con los valores de la herramienta?
Lo recomendable es enviar ancho del viewport, alto del viewport, DPR, navegador, sistema operativo, nivel de zoom, URL afectada y una captura de pantalla donde se vea el problema.
¿Por qué una web puede verse distinta en dos pantallas con la misma resolución?
Porque influyen el zoom del navegador, el escalado del sistema operativo, las barras visibles, la orientación del dispositivo, la densidad de píxel y el tamaño real de la ventana del navegador.
¿La herramienta es útil para proyectos de software a medida?
Sí. En aplicaciones web personalizadas, dashboards, paneles de gestión y herramientas internas, conocer el viewport ayuda a diseñar interfaces más usables y a resolver incidencias visuales con más precisión.
Conclusión
La herramienta de resolución del navegador es sencilla, pero aporta un dato clave para cualquier proyecto web: el espacio real en el que se muestra una página. Su valor está en convertir una percepción subjetiva, como “la web no se ve bien”, en información concreta que ayuda a analizar, reproducir y resolver incidencias con más criterio.
El contenido anterior diferencia resolución, viewport y densidad de píxel, evita promesas técnicas no verificables y conecta la utilidad de la herramienta con casos reales de diseño web, soporte, QA, CRO, SEO técnico y desarrollo a medida.
