Probador de tamaño de viewport y breakpoints responsivos
Descubre qué tan grande es realmente tu ventana del navegador para una página web. Esta herramienta lee el ancho y el alto de tu viewport en píxeles CSS, la relación de píxeles de tu dispositivo y la orientación, y muestra en qué breakpoint responsivo cae el tamaño actual, todo en vivo. Cambia el tamaño de la ventana y cada valor se actualiza al instante.
Cambia el tamaño de la ventana de tu navegador y observa cómo se actualizan estos valores en vivo.
Breakpoints de Tailwind CSS
El rango en el que cae tu viewport se resalta mientras cambias el tamaño.
| Prefijo | Ancho mínimo | Se aplica desde |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Categorías de dispositivos
Panel de prueba redimensionable
Arrastra la esquina inferior derecha para cambiar el tamaño de este panel. Informa su propio tamaño y a qué breakpoint llegaría ese ancho: un indicador responsivo rápido.
Tamaños de viewport comunes en dispositivos
Viewports aproximados en píxeles CSS en orientación vertical, como referencia; los valores reales varían según el navegador y el sistema operativo.
| Dispositivo | Viewport (px CSS) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Herramientas relacionadas
Qué es un viewport
El viewport es el área visible en la que una página web puede dibujarse: la región de contenido de la ventana de tu navegador, sin contar las pestañas, la barra de direcciones ni la barra de marcadores. Por eso casi siempre es más pequeño que la resolución de tu pantalla: la pantalla es el panel completo, mientras que el viewport es solo la porción que la página puede usar. window.innerWidth y window.innerHeight informan esa área en píxeles CSS, y documentElement.clientWidth/clientHeight informan el viewport de diseño (la misma área menos el ancho de una barra de desplazamiento clásica, cuando está presente). Como el viewport cambia en el instante en que cambias el tamaño de la ventana, divides la pantalla o rotas el dispositivo, es el valor al que realmente responden los diseños responsivos.
Píxeles CSS frente a píxeles de dispositivo y devicePixelRatio
Un píxel CSS es una unidad de diseño, no un punto físico en el panel. En una pantalla estándar, un píxel CSS corresponde a un píxel físico, pero 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. window.devicePixelRatio indica ese multiplicador: un valor de 2 significa que un viewport de 1440 píxeles CSS de ancho se dibuja con 2880 píxeles físicos. Las páginas web se diseñan en píxeles CSS, por lo que un teléfono que reporta un viewport de 390 píxeles de ancho con un DPR de 3 tiene un panel físico de aproximadamente 1170 píxeles de ancho. Para ver la resolución física completa y la densidad de píxeles de tu pantalla, usa las herramientas What Is My Screen Size y Screen Resolution Test.
Breakpoints responsivos
Un breakpoint es un ancho de viewport en el que un diseño cambia: las columnas se apilan, un menú se colapsa, el tamaño del texto cambia. Las media queries de CSS y los frameworks de utilidades como Tailwind CSS definen un pequeño conjunto de anchos con nombre y aplican estilos a partir de ese ancho hacia arriba. Los valores predeterminados de Tailwind son sm en 640px, md en 768px, lg en 1024px, xl en 1280px y 2xl en 1536px; por debajo de 640px estás en el rango base sin prefijo. La referencia a continuación resalta el rango activo mientras cambias el tamaño, y el panel de prueba arrastrable informa a qué breakpoint llegaría su propio ancho, una forma rápida de previsualizar cómo se comporta un componente en distintos tamaños sin cambiar toda tu ventana.
Por qué innerWidth difiere del ancho de la pantalla
Hay varios factores entre la resolución de tu panel y el viewport que ve una página. El chrome del navegador (pestañas, barras de herramientas y una barra de desplazamiento visible) resta espacio al área utilizable. El zoom de la página también lo modifica: al hacer zoom se reduce la cantidad de píxeles CSS que caben, por lo que innerWidth disminuye aunque la ventana no se haya movido, y también afecta a devicePixelRatio. En móviles, la etiqueta meta viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, indica al navegador que ajuste el viewport de diseño al ancho del dispositivo en lugar de simular ser un escritorio de ~980px, por eso los sitios responsivos la necesitan. El escalado de pantalla del sistema operativo también cambia el conteo de píxeles CSS, por lo que dos monitores idénticos pueden reportar tamaños de viewport diferentes.