Info de Pantalla: Resolución y Tamaño de Ventana

Área de Visualización

-- × -- px

Resolución de Pantalla

-- × -- px

Relación de Píxeles (DPR)

-- x
screen.width / height
window.outerWidth / outerHeight
window.innerWidth / innerHeight (Viewport)

Orientación

--

Profundidad de Color

-- bit

Tamaño de Ventana

--

Punto de Interrupción CSS

--

Lista exhaustiva de todas las propiedades accesibles desde los objetos globales del navegador.

Property Value

Información de Pantalla: Resolución y Tamaño del Navegador 💡

Optimiza tu flujo de trabajo con esta herramienta diseñada para obtener, en tiempo real, los datos exactos de tu monitor, el área de visualización del navegador y la densidad de píxeles.

Es el aliado perfecto para desarrolladores web que buscan ajustar sus puntos de interrupción (breakpoints) con precisión, o para diseñadores que necesitan verificar la relación de aspecto y la nitidez visual de sus proyectos.

📘 Cómo aprovechar esta herramienta

  • Ajuste en tiempo real: Cambia el tamaño de la ventana de tu navegador y observa cómo los valores se actualizan al instante. No necesitas recargar la página para ver los cambios.
  • Identificación de Breakpoints: Detecta automáticamente en qué categoría de diseño te encuentras (sm, md, lg, xl) basándote en los estándares actuales de CSS.
  • Consulta de DPR (Densidad de Píxeles): Descubre el Device Pixel Ratio de tu equipo para confirmar si estás ante una pantalla de alta densidad (tipo Retina) y entender cómo se renderizan tus imágenes.
  • Explorador de Propiedades: Accede a un listado detallado y filtrable con todos los atributos técnicos que los objetos window y screen comunican al navegador.

🧐 Preguntas frecuentes

¿Cuál es la diferencia entre resolución de pantalla y Viewport? La resolución de pantalla es el tamaño físico total de tu monitor (los píxeles totales del hardware). El Viewport es el área útil dentro del navegador donde se despliega la web, descontando barras de herramientas, menús de marcadores y bordes de la ventana.

¿Por qué la resolución detectada es menor a la que indica la caja de mi monitor? Esto sucede por el escalado del sistema operativo. Para evitar que el texto se vea minúsculo en pantallas de alta resolución, los navegadores utilizan "píxeles lógicos". Así, se garantiza que la experiencia de lectura sea cómoda independientemente de cuántos puntos físicos tenga el panel.

¿Puedo usar esta herramienta en mi móvil o tablet? ¡Por supuesto! Es totalmente compatible. Al abrirla en un dispositivo móvil, podrás comprobar la resolución real del panel y verificar cómo el navegador gestiona el cambio entre la orientación vertical y horizontal.

📚 ¿Sabías que...?

En los inicios de Internet, la gran mayoría de los usuarios navegaba en pantallas de 800x600 píxeles. Hoy, con la explosión de dispositivos que van desde relojes inteligentes hasta monitores profesionales 8K, el diseño responsivo ya no es una opción, sino una obligación. Esta herramienta aprovecha las APIs más modernas de JavaScript para mostrarte exactamente qué información está recibiendo cualquier sitio web sobre tu equipo.