Comprobador de Resolución de Pantalla — Viewport, DPI y Ratio Píxeles
Comprueba exactamente qué interpreta tu navegador como tu pantalla — ancho y alto físicos, el área disponible tras descontar barras de tareas y chrome del SO, el viewport interno que tus píxeles CSS llenan realmente, el ratio de píxeles del dispositivo, que determina si `1px` en CSS pasa a ser 1, 2 o 3 píxeles físicos, y la profundidad de color a la que renderiza tu navegador. Cada valor se actualiza en vivo cuando arrastras el borde de la ventana, lo que lo hace útil para probar breakpoints responsivos, comprobar el comportamiento HiDPI en un monitor nuevo o comprobar que tu `transform: scale()` tiene en cuenta devicePixelRatio.
Sobre esta herramienta
Los valores se obtienen de `window.screen` (width, height, availWidth, availHeight, colorDepth, pixelDepth, orientation.type), de `window.innerWidth/innerHeight` (el viewport de layout en píxeles CSS) y de `window.devicePixelRatio` (el multiplicador entre píxeles CSS y píxeles hardware — 1 en pantallas clásicas, 2 en la mayoría de portátiles Retina, 3 en la mayoría de móviles de gama alta). La página se suscribe a eventos `resize` para que cada métrica se actualice en cuanto el navegador cambia de dimensiones, incluida la rotación del dispositivo y el reajuste de ventana flotante en iPad y Android multiventana. Los números mostrados son los mismos que cualquier código JavaScript de otro sitio puede leer sobre tu dispositivo, por eso las bibliotecas de publicidad digital y de huella digital se apoyan en ellos — conocerlos te ayuda a entender tu propia configuración anti-rastreo. Usos habituales: elegir un punto de ruptura CSS que coincida con un dispositivo real, escoger un tamaño de miniatura que no se vea borroso en Retina, depurar un transform CSS en HiDPI o confirmar que un Chromebook informa la resolución que esperas al `srcset` de tu imagen responsive.
- Ancho × alto físicos de la pantalla (window.screen.width/height)
- Área disponible tras barras de tareas/SO (availWidth/availHeight)
- Viewport de layout CSS (window.innerWidth/innerHeight)
- Ratio de píxeles para detección Retina/HiDPI (1, 2, 3 típicos)
- Profundidad de color + de píxel en bits
- Tipo de orientación (portrait-primary, landscape-secondary, etc.)
- Actualizaciones en vivo al redimensionar, rotar y reajuste en pantalla dividida
- Conteo efectivo de píxeles hardware = viewport × devicePixelRatio
- Copia con un clic de todas las métricas como volcado clave-valor
- Útil para depurar CSS responsivo, auditar fingerprinting, verificar srcset
Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).
Por Marco B. ·