Qué es
El CSS (el código de estilo que controla el aspecto de una página) puede dimensionar los elementos usando unidades fijas, como píxeles (una caja fijada a exactamente 800 píxeles de ancho, por ejemplo), o unidades relativas y flexibles, como los porcentajes, que se ajustan automáticamente a cualquier pantalla en la que se vea la página. Un "elemento de ancho fijo" es cualquier parte de una página — una imagen, una tabla, una caja contenedora — dimensionada con uno de esos valores fijos en píxeles en lugar de uno flexible.
Esto funciona bien mientras la pantalla sea más ancha que ese valor fijo, pero en cuanto la pantalla real (un móvil, en particular) es más estrecha que el ancho fijo del elemento, el navegador no tiene más opción que dejar que la página se desplace hacia los lados para dar cabida a ese elemento, ya que no puede encoger un elemento por debajo del tamaño que se le ha fijado explícitamente.
En qué afecta
El desplazamiento horizontal es una de las señales más chocantes e inconfundibles de un diseño móvil roto, ya que obliga a un visitante a desplazarse en dos direcciones a la vez solo para leer con normalidad — un patrón de navegación completamente distinto y más frustrante que el desplazamiento vertical que espera cualquier visitante móvil. Normalmente basta con un único elemento demasiado grande en cualquier parte de la página (una imagen ancha, una tabla incrustada, una caja de ancho fijo) para forzar este comportamiento en toda la página, no solo alrededor de ese elemento concreto.
Esto suele ser un resto de contenido diseñado primero para uso en escritorio — una tabla copiada de una hoja de cálculo, o una imagen insertada con sus dimensiones originales sin comprimir — más que un fallo fundamental en el diseño general de la web.
Cómo solucionarlo
- Abre tu web en un móvil (o una ventana de navegador estrecha) y comprueba si toda la página se desplaza hacia los lados, o encuentra la sección concreta donde empieza a hacerlo.
- Busca el elemento concreto que causa el desbordamiento — a menudo una imagen ancha, una tabla incrustada, o una caja con un ancho en píxeles fijado explícitamente en su estilo.
- Sustituye los anchos fijos en píxeles por unidades relativas como porcentajes, o añade una regla
max-width: 100%para que el elemento nunca pueda superar el ancho real de la pantalla. - Para tablas anchas en particular, considera envolverlas en un contenedor con desplazamiento propio limitado a esa tabla concreta, en lugar de dejar que toda la página se desplace hacia los lados.
- Vuelve a comprobar en un móvil después de cada cambio para confirmar que el desplazamiento horizontal ha desaparecido.