Detector de Tamaño de Pantalla

Referencia

Viewport vs resolución de pantalla — ¿cuál es la diferencia?

El viewport es el área visible de una página web dentro del navegador, medida en píxeles CSS (window.innerWidth × window.innerHeight). Cambia cuando redimensionas el navegador o abres DevTools. La resolución de pantalla es el recuento total de píxeles de tu pantalla física (screen.width × screen.height) — esto es fijo según tu hardware y configuración de pantalla. Para diseño web responsive, el viewport es lo que importa — determina qué media queries y breakpoints de CSS están activos.

¿Qué es la relación de píxeles del dispositivo (DPR)?

La Relación de Píxeles del Dispositivo (DPR) indica cuántos píxeles físicos (hardware) corresponden a un píxel CSS. Un DPR de 1 significa mapeo 1:1 (pantallas estándar). Un DPR de 2 significa una pantalla Retina/HiDPI — cada píxel CSS se renderiza con 4 píxeles físicos (2×2), produciendo texto e imágenes más nítidos. Un DPR de 3 es común en smartphones de gama alta. Esto importa para: servir imágenes @2x/@3x a pantallas de alto DPR, entender por qué las capturas de pantalla en pantallas Retina tienen el doble de la resolución esperada, y depurar problemas de diseño que solo aparecen en valores específicos de DPR.

Casos de uso para la detección de pantalla

Pruebas de diseño responsive — verifica que los breakpoints CSS se activan en los anchos de viewport correctos sin abrir DevTools. Reportes de bugs — comparte las dimensiones exactas del viewport, resolución de pantalla y DPR al reportar problemas de visualización a los desarrolladores. Planificación de capturas — conoce las dimensiones exactas antes de tomar capturas de pantalla para documentación o fichas de app store. Dimensionamiento de anuncios y banners — verifica que las dimensiones del viewport coincidan con los tamaños requeridos de espacios publicitarios.

Privacidad

Las dimensiones se leen localmente de tu navegador. No se envían datos a ningún servidor.