Diagnóstico

Tamaño de pantalla y diagnóstico de entorno

Información detallada sobre tu pantalla, navegador y dispositivo. Datos en tiempo real, útiles tanto para usuarios comunes como para diseñadores web y programadores.

Pantalla

Viewport — área visible del navegador
— × — px
El espacio que el usuario realmente ve dentro del navegador. Es el valor de referencia para las reglas @media en CSS y para los breakpoints de Bootstrap.
Breakpoint Bootstrap 5 activo
— —
Nombre del breakpoint de Bootstrap 5 que corresponde al ancho actual de la ventana. Determina qué clases col-*, d-* y fs-* están activas en este momento.
Resolución lógica de pantalla
— × — px
Resolución total de la pantalla en píxeles CSS (lógicos). Es la que reporta el sistema operativo al navegador. No descuenta la barra de tareas.
Resolución física real
— × — px reales
Píxeles físicos del hardware: resolución lógica × DPR. Es la que aparece en las especificaciones técnicas del fabricante del dispositivo.
Pantalla disponible (sin barra de tareas)
— × — px
Área utilizable de la pantalla, descontando la barra de tareas del sistema operativo y otros elementos fijos del escritorio.
Device Pixel Ratio (DPR)
— x
Relación entre píxeles físicos y píxeles CSS. DPR 2 = pantalla Retina / HiDPI. Fundamental para el escalado correcto de imágenes con srcset.
Profundidad de color
— bits
Bits por píxel para representar el color. 24 bits = 16,7 millones de colores (color verdadero). La mayoría de pantallas modernas reportan 24 o 30 bits.
Orientación del dispositivo
—
Orientación física actual. Cambia al rotar el dispositivo. Relevante para @media (orientation: landscape). Se actualiza automáticamente.
Documento HTML — área total del contenido
— × — px
Tamaño total del documento HTML, incluyendo lo que queda fuera del viewport (scroll). Si el ancho del documento es mayor que el del viewport, hay un desbordamiento horizontal — señal de un problema de CSS.

Navegador

Nombre y versión
—
Motor de renderizado
—
Componente que interpreta HTML y CSS. Blink (Chrome/Edge), WebKit (Safari), Gecko (Firefox). Las diferencias entre motores explican inconsistencias visuales entre navegadores.
Idioma del navegador
—
Idioma configurado en el navegador (navigator.language). Los sitios web pueden usarlo para mostrar contenido en el idioma preferido sin que el usuario lo seleccione.
Zona horaria
—
Zona horaria del sistema operativo detectada por el navegador. Útil para apps que deben mostrar fechas y horas locales sin pedirle al usuario que la configure.
Cookies habilitadas
—
Si está deshabilitado, los sitios no pueden guardar sesiones ni preferencias. Afecta el funcionamiento de la mayoría de aplicaciones web.
Estado de conexión
—
Detectado mediante navigator.onLine. Útil para apps con soporte offline (PWA). Indica si el navegador tiene acceso a la red en este momento.
User Agent
—
Cadena que el navegador envía al servidor en cada petición HTTP. Permite detectar el navegador, versión y sistema operativo del visitante. Se usa también para estadísticas de audiencia y personalización de contenido.

Dispositivo

Sistema operativo
—
Detectado a partir del User Agent. Útil para diagnosticar problemas de compatibilidad específicos de cada plataforma (Windows, macOS, iOS, Android).
Tipo de dispositivo
—
Indica si el dispositivo tiene pantalla táctil y cuántos puntos de toque simultáneos soporta (navigator.maxTouchPoints). 0 = sin pantalla táctil.
Núcleos de CPU disponibles
— núcleos lógicos
Procesadores lógicos disponibles para el navegador (navigator.hardwareConcurrency). Indica el nivel de paralelismo posible con Web Workers y tareas en segundo plano.
Memoria RAM aproximada
—
Disponible en Chrome y Edge (navigator.deviceMemory). El navegador reporta un valor redondeado (0.25, 0.5, 1, 2, 4 u 8 GB) para proteger la privacidad del usuario.

Compartir diagnóstico

Copia todos los datos en texto plano para pegarlos en un correo, Slack o ticket de soporte.

¿Qué significa cada dato?

Explicación detallada de cada métrica que muestra esta herramienta. Tanto si eres diseñador, programador o usuario final, este glosario te ayudará a interpretar los valores correctamente.

El viewport es la región del navegador donde se muestra el contenido de una página web. Es el ancho y alto disponible dentro de la ventana, sin contar la barra de herramientas, las pestañas ni la barra de desplazamiento.

En CSS, el viewport es la referencia para las media queries: @media (max-width: 768px) se activa cuando el ancho del viewport es menor a 768 px. También es la base para las unidades vw (viewport width) y vh (viewport height).

En JavaScript se obtiene con window.innerWidth y window.innerHeight.

Los breakpoints son los puntos de quiebre donde el diseño responsivo cambia su comportamiento. Bootstrap 5 define 6:

  • xs — menos de 576 px (teléfonos pequeños en vertical)
  • sm — desde 576 px (teléfonos en horizontal)
  • md — desde 768 px (tablets)
  • lg — desde 992 px (laptops)
  • xl — desde 1200 px (escritorios)
  • xxl — desde 1400 px (pantallas grandes)

Saber en qué breakpoint estás te indica exactamente qué clases CSS de Bootstrap están activas: col-md-6, d-lg-flex, etc.

El Device Pixel Ratio es la relación entre los píxeles físicos del hardware y los píxeles CSS lógicos que usa el navegador para calcular el layout.

  • DPR = 1 — Pantalla estándar. 1 px CSS = 1 px físico.
  • DPR = 2 — Pantalla Retina / HiDPI. 1 px CSS = 2×2 = 4 px físicos.
  • DPR = 3 — Alta densidad (teléfonos modernos). 1 px CSS = 3×3 = 9 px físicos.

Esto es crítico para diseñadores: una imagen de 200×200 px en una pantalla DPR 2 se verá borrosa. La solución es usar srcset o image-set().

Se accede en JavaScript con window.devicePixelRatio.

La resolución lógica es la que usa el navegador para calcular el layout (píxeles CSS). La resolución física es la cantidad real de píxeles del panel: resolución lógica × DPR.

Por ejemplo, un iPhone 15 tiene resolución lógica 390×844 px CSS, pero su pantalla física es 1170×2532 px reales (DPR = 3). La resolución física es la que figura en las especificaciones del fabricante.

El tamaño del documento incluye todo el contenido, incluyendo lo que queda fuera del viewport (scroll). En condiciones normales, el ancho del documento debería ser igual al ancho del viewport.

Si el ancho del documento supera al del viewport, hay un desbordamiento horizontal: aparece barra de scroll horizontal, fondos que no llegan al borde o contenido que se sale del área visible en móvil. Se obtiene con document.documentElement.scrollWidth.

El User Agent es una cadena de texto que el navegador envía al servidor en cada petición HTTP mediante el encabezado User-Agent. Contiene información sobre el navegador, su versión y el sistema operativo.

Los servidores y aplicaciones web analizan el User Agent para detectar el tipo de cliente, servir recursos optimizados, personalizar contenido y generar estadísticas de audiencia.

El motor de renderizado interpreta el HTML y el CSS y dibuja la página en pantalla. Los principales son:

  • Blink — Chrome, Edge, Opera, Brave y la mayoría de navegadores basados en Chromium.
  • WebKit — Safari en macOS e iOS. Por política de Apple, todos los navegadores en iOS deben usar WebKit.
  • Gecko — Mozilla Firefox.

Las diferencias entre motores explican por qué una misma página puede verse distinta en Safari y en Chrome.

A través de la Network Information API (disponible principalmente en Chrome y Edge), el navegador puede estimar: tipo efectivo (4g, 3g, 2g, slow-2g), velocidad de bajada en Mbps, latencia RTT en ms y si el usuario activó el modo ahorro de datos.

Esta sección no aparece si el navegador no soporta la API (Firefox y Safari no la exponen por razones de privacidad).