Reajuste

Qué solicita

Cuando la ventana gráfica tiene 320 píxeles CSS de ancho — lo que corresponde a un escritorio de 1280 px al 400 % de zoom, o a un dispositivo móvil pequeño — el contenido debe reajustarse en una sola columna sin requerir desplazamiento horizontal. El usuario nunca debería tener que desplazarse tanto vertical como horizontalmente para leer contenido continuo. Se permiten excepciones para casos esenciales: tablas de datos, mapas complejos, muestras de código y presentaciones en las que el desplazamiento en dos dimensiones es inherente al contenido.

Cómo cumplirlo

• Construir la maquetación con enfoque «mobile first» usando flexbox o CSS grid que se contraiga a una sola columna en anchos reducidos.
• Probar exactamente a 320 px de ancho de ventana gráfica — o al 400 % de zoom en una ventana de 1280 px — y comprobar todas las páginas.
• Usar max-width: 100% en imágenes, vídeos y medios incrustados para que se reduzcan con la ventana gráfica.
• Para la navegación, contraer la barra horizontal de escritorio en un menú vertical para móvil en el punto de corte adecuado.
• En las tablas de datos, permitir el desplazamiento horizontal dentro de un contenedor overflow-x: auto — la tabla en sí está exenta, pero su contenedor no debe empujar la página lateralmente.
• No usar anchos fijos en píxeles para contenedores del cuerpo ni para diálogos modales.

Fallos habituales

• Secciones hero de ancho fijo (width: 1200px) que desbordan la ventana gráfica a 320 px, forzando el desplazamiento horizontal.
• Diálogos modales dimensionados en vw o px que superan los 320 px de ancho y se recortan en pantallas pequeñas.
• Muestras de código en bloques <pre> sin ajuste de línea ni contenedores de desplazamiento, que amplían la página hacia los lados.
• Páginas de marketing con elementos decorativos posicionados de forma absoluta que no tienen en cuenta las ventanas gráficas estrechas.
• Elementos fijados que se superponen al contenido al 400 % de zoom porque fueron dimensionados para la ventana gráfica de ancho completo.
• Tablas que no están envueltas en un contenedor de desbordamiento, de modo que toda la página se desplaza horizontalmente en lugar de solo la tabla.

Por qué importa

El reajuste es el criterio que detecta la mayoría de los sitios «responsive pero no verdaderamente responsive» — una maquetación que se rompe a 320 píxeles CSS equivale a una maquetación que se rompe al 400 % de zoom para un usuario con baja visión en escritorio. Los dos casos son matemáticamente idénticos. Solucionar el reajuste suele significar reforzar el diseño responsivo que ya estaba casi completado, lo que lo convierte en una de las correcciones de mayor impacto en WCAG.