Probador de tamaño de viewport y breakpoints responsivos

El viewport es el área en la que una página web debe dibujar: la ventana del navegador sin las pestañas, la barra de direcciones y las barras de desplazamiento. Por eso casi siempre es más pequeño que la resolución de tu pantalla: la pantalla es todo el panel, mientras que el viewport es solo la sección que puede usar la página. Se mide en píxeles CSS, unidades de diseño, en lugar de puntos físicos — las pantallas de alta densidad 'Retina' agrupan dos o tres píxeles físicos en cada píxel CSS para que el texto se vea más nítido, y window.devicePixelRatio informa de ese multiplicador.

Esta herramienta lee window.innerWidth y window.innerHeight en cada cambio de tamaño y orientación, junto con el viewport de layout desde documentElement.clientWidth/clientHeight, la relación de píxeles de tu dispositivo y la orientación. Un breakpoint es el ancho de un viewport en el que cambia una disposición — las columnas se apilan, un menú se colapsa, el texto cambia de tamaño — y frameworks como Tailwind CSS aplican estilos desde un conjunto de anchos nombrados hacia arriba. La referencia de abajo resalta el rango en el que se encuentra tu ancho, y el panel de pruebas arrastrable informa del breakpoint que alcanzaría su propio ancho, así que puedes previsualizar un componente sin cambiar el tamaño de toda la ventana. Todo se ejecuta localmente; no se sube nada.

Si los números no cuadran, varias cosas se sitúan entre la resolución de tu panel y el viewport que ve una página. La interfaz del navegador y las barras de desplazamiento restan área utilizable, y el zoom de página reduce el recuento de píxeles CSS — por lo que innerWidth disminuye sin que la ventana se mueva — al igual que el escalado de pantalla del sistema operativo, por lo que dos monitores idénticos pueden mostrar tamaños diferentes. En los teléfonos, la etiqueta meta viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, distribuye la página al ancho del dispositivo en lugar de simular un escritorio de ~980px, así que un viewport de 390 px en DPR 3 se coloca en un panel de aproximadamente 1170 píxeles físicos de ancho. Para ver la resolución física completa y la densidad de píxeles de tu pantalla, utiliza las herramientas What Is My Screen Size y Screen Resolution Test.

Breakpoints responsivos comunes