El viewport es el área que usa el navegador para mostrar una página web, y su tamaño es el ancho y el alto de esa área medidos en píxeles CSS. Suele ser mucho menor que la resolución de la pantalla: un iPhone con una pantalla de 1206 × 2622 píxeles tiene un viewport de 402 × 874 píxeles CSS, porque cada píxel CSS se dibuja con tres píxeles físicos en cada dirección. El CSS responsive, las media queries y casi todas las decisiones de maquetación se basan en el tamaño del viewport, no en la resolución de la pantalla.
Tamaño del viewport frente a resolución de pantalla
La pantalla de un móvil se describe con tres cifras que es fácil confundir:
| Término | Ejemplo (iPhone 17) | Qué es |
|---|---|---|
| Resolución de pantalla | 1206 × 2622 px | Píxeles físicos del panel |
| Device pixel ratio (DPR) | 3 | Píxeles físicos por cada píxel CSS, en cada dirección |
| Tamaño del viewport | 402 × 874 px CSS | Resolución dividida entre el DPR; es lo que ve el CSS |
En escritorio, el DPR suele ser 1 (un monitor de 1920 × 1080 al 100 % da un viewport de 1920 px de ancho, menos las barras de desplazamiento) o 2 en portátiles con pantalla de alta densidad. El zoom del navegador también cambia el DPR: al ampliar al 200 %, el ancho del viewport en píxeles CSS se reduce a la mitad.
Las cifras modelo a modelo están en la tabla de tamaños de pantalla y viewport del iPhone.
Cómo saber el tamaño de tu viewport
En la consola del navegador
Abre DevTools (F12 o Cmd + Option + I), ve a la pestaña Console y ejecuta:
`${window.innerWidth} × ${window.innerHeight} @ ${window.devicePixelRatio}x`window.innerWidth incluye la barra de desplazamiento vertical. document.documentElement.clientWidth no la incluye y se acerca más a lo que usan los porcentajes de CSS y los anchos de 100%.
En el modo dispositivo de DevTools
La barra de dispositivos muestra el tamaño del viewport emulado encima de la página. En el modo Responsive puedes arrastrar los bordes o escribir cualquier tamaño. Consulta la guía del emulador móvil de Chrome.
En el móvil
Abre cualquier web del tipo «what is my viewport» o carga una página con un pequeño script que muestre innerWidth y devicePixelRatio. Ten en cuenta que el resultado depende de la orientación y de las barras del navegador.
Layout viewport y visual viewport
En realidad, los navegadores móviles tienen dos viewports:
- El layout viewport es el área en la que el CSS maqueta la página. Con una etiqueta meta viewport correcta, su ancho coincide con el ancho del dispositivo en píxeles CSS.
- El visual viewport es la parte visible en pantalla en cada momento. Se reduce cuando el usuario amplía con dos dedos o cuando se abre el teclado en pantalla.
Los elementos con position: fixed se colocan respecto al layout viewport, y por eso un pie de página fijo puede quedar oculto detrás del teclado. Desde JavaScript se lee el visual viewport con window.visualViewport.width y .height, y se puede escuchar su evento resize.
Por qué la altura del viewport cambia tanto en el móvil
En el móvil, la barra de direcciones y las barras de herramientas se pliegan al desplazarse, así que la altura visible cambia. La unidad clásica 100vh usa la altura máxima posible, y por eso las secciones a pantalla completa se cortaban por abajo. Ahora CSS tiene una unidad para cada caso:
| Unidad | Significado |
|---|---|
svh |
Altura pequeña del viewport: barras del navegador visibles |
lvh |
Altura grande del viewport: barras completamente ocultas |
dvh |
Altura dinámica: cambia según se mueven las barras |
vh |
Igual que lvh en los navegadores móviles actuales |
Para una sección de portada que debe caber en la pantalla al cargar la página, min-height: 100svh suele ser la opción más segura. Para el ancho existen las unidades equivalentes svw, lvw y dvw.
Tamaños de viewport habituales
| Tipo de dispositivo | Anchos de viewport típicos (vertical) |
|---|---|
| Móviles pequeños | 320–375 px |
| iPhone actuales | 375–440 px |
| Móviles Android | 360–412 px |
| Tablets | 744–1032 px |
| Portátiles | 1280–1536 px |
| Monitores de escritorio | 1440–2560 px |
Por estos rangos las maquetaciones responsive son fluidas entre breakpoints en lugar de apuntar a tamaños exactos.
Cómo probar distintos tamaños de viewport
Al cambiar el tamaño de la ventana en escritorio cambia el ancho del viewport, pero los navegadores de escritorio suelen detenerse hacia los 500 px y mantienen un DPR de 1 o 2. Para ver un viewport de móvil con el tamaño y la densidad correctos, usa el modo dispositivo de DevTools o una extensión de vista móvil como Mobile View Extension, que aplica el tamaño de pantalla, el DPR y el user agent de un dispositivo y permite introducir resoluciones personalizadas. El proceso completo está en cómo hacer un test responsive.
Preguntas frecuentes
¿Cuál es el tamaño de mi viewport?
Ejecuta window.innerWidth y window.innerHeight en la consola del navegador. En el móvil, abre una página que muestre esos valores; el resultado cambia con la orientación.
¿El tamaño del viewport es lo mismo que la resolución de pantalla?
No. El tamaño del viewport se mide en píxeles CSS y la resolución en píxeles físicos. Divide la resolución entre el device pixel ratio para obtener el tamaño del viewport.
¿Para qué tamaño de viewport debo diseñar?
Diseña maquetaciones fluidas que funcionen desde 320 px. Revisa los anchos de móvil habituales de 360, 390–402 y 430–440 px, una tablet de unos 768–834 px y un escritorio de unos 1280–1440 px.