Cómo hacer que una web sea adaptable a móviles

Para hacer que una web sea adaptable a móviles, añade una etiqueta meta viewport, construye el diseño primero para móvil con anchos flexibles y usa breakpoints CSS para reorganizarlo en pantallas grandes: apilando columnas, plegando el menú y escalando las imágenes para que quepan. Después revisa cada página al ancho de un móvil para detectar desplazamiento lateral, textos diminutos y botones demasiado pequeños para tocar. En una web creada con IA, un prompt claro y una revisión en una vista previa de tamaño móvil suelen resolver casi todo.

Qué es realmente el diseño adaptable

Una web adaptable usa un único conjunto de páginas y URLs que se ajustan a la pantalla. En lugar de un sitio «m.» aparte, el CSS cambia el diseño a ciertos anchos, llamados breakpoints. Las piezas básicas son:

• La etiqueta meta viewport indica a los navegadores móviles que usen el ancho real del dispositivo.
• Diseños fluidos que usan porcentajes, flexbox y grid en lugar de anchos fijos en píxeles.
• Media queries (o clases de frameworks como md: de Tailwind) que cambian el diseño a partir de un ancho dado.
• Medios flexibles: imágenes y vídeos que se encogen para encajar en su contenedor.

Importa porque gran parte de tu tráfico probablemente llega desde móviles, y porque Google indexa la versión móvil de tus páginas. Si el contenido o los enlaces solo existen en escritorio, Google tampoco los verá.

Opciones y compromisos

Mobile-first suele ser más sencillo: una sola columna es el diseño más fácil, y añadir columnas a medida que hay espacio es menos trabajo que quitarlas.

Las partes que suelen romperse

La etiqueta viewport

Si una página se ve como una versión diminuta de escritorio en un móvil, falta la etiqueta viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

No añadas maximum-scale=1 ni user-scalable=no. Bloquear el zoom con pellizco hace que la web sea más difícil de usar para personas con baja visión.

Anchos fijos y desplazamiento horizontal

El error de adaptación más común es algo más ancho que la pantalla: un contenedor fijo de width: 1200px, una tabla ancha, una URL larga o un bloque de código, una imagen sin max-width: 100%. Toda la página se desplaza entonces a los lados. Usa max-width en lugar de width, deja que el texto se ajuste y da a los elementos anchos su propia área de desplazamiento.

Navegación

Cinco enlaces del menú de escritorio raramente caben en un móvil. La solución habitual es un botón de menú que abre un panel. Mantén visibles las dos o tres acciones más importantes —«Reservar», «Carrito», «Iniciar sesión»— y asegúrate de que el menú funciona con teclado y se cierra con facilidad.

Texto y áreas táctiles

• Un texto base de unos 16 px es un mínimo sensato en móviles. Los campos con texto más pequeño hacen que los iPhone amplíen la pantalla al tocarlos.
• Haz que los botones y los enlaces sean fáciles de pulsar. WCAG 2.2 AA fija un mínimo de 24 por 24 píxeles CSS (o suficiente separación); unos 44 píxeles es más cómodo para el pulgar.
• Deja espacio entre enlaces contiguos para que la gente no pulse el equivocado.

Tablas y datos

Las tablas anchas son la parte más difícil de una app adaptable. Opciones, por orden de preferencia: mostrar menos columnas en móviles, convertir cada fila en una tarjeta o meter la tabla en un contenedor con desplazamiento horizontal y la primera columna fijada. Elige según lo que la gente necesite comparar.

Imágenes y medios

Usa max-width: 100% y height: auto, sirve archivos más pequeños a las pantallas pequeñas con srcset y define el ancho y la altura para evitar saltos en el diseño. Los vídeos y mapas incrustados necesitan un contenedor adaptable para mantener su proporción. Las imágenes más ligeras también hacen que las páginas carguen más rápido; consulta cómo hacer tu web más rápida.

Formularios

Coloca las etiquetas encima de los campos, haz que los campos ocupen todo el ancho y usa los tipos de entrada adecuados (type="email", type="tel", inputmode="numeric") para que el móvil muestre el teclado correspondiente. Pon el botón de envío donde el pulgar lo alcance y mantenlo visible cuando aparezca el teclado.

Interacciones solo con el ratón

En los móviles no hay cursor que pase por encima. Los tooltips, desplegables y vistas previas que solo aparecen al pasar el ratón son invisibles para quien usa pantalla táctil. Haz que también funcionen al tocar.

Prompts que funcionan

Para una construcción nueva, dilo desde el principio:

Constrúyelo pensando primero en móvil. Una sola columna en móviles, dos columnas desde el ancho de tableta, diseño completo en escritorio. Sin desplazamiento horizontal a 320 px de ancho, texto base de al menos 16 px, áreas táctiles de al menos 44 px, un botón de menú en pantallas pequeñas y tablas que se conviertan en tarjetas en móviles.

Para una página existente, describe lo que ves:

En móviles, la página /pricing se desplaza hacia los lados y las tres tarjetas de planes aparecen aplastadas una al lado de otra. Apila las tarjetas verticalmente por debajo de 768 px, haz que la tabla comparativa se desplace horizontalmente dentro de su propio contenedor con la columna de características fijada y mantén sin cambios el diseño de escritorio.

Revisa cada página a 375 px de ancho. Enumera todo lo que se desborde, se superponga, tenga texto menor de 16 px o áreas táctiles menores de 44 px, o funcione solo con el ratón, y corrige cada uno.

Paso a paso

1. Confirma la etiqueta viewport en el head de la página.
2. Prueba a 320–375 px de ancho en el modo de dispositivo del navegador o en una vista previa de tamaño móvil. Recorre cada página de arriba abajo.
3. Arregla primero el desplazamiento horizontal. Encuentra el elemento que es demasiado ancho; todo lo demás es difícil de valorar hasta que desaparezca.
4. Ordena la navegación: botón de menú, acciones clave visibles.
5. Revisa el texto, las áreas táctiles y los formularios en cada flujo clave: registro, búsqueda, pago, contacto.
6. Gestiona tablas y medios: tarjetas o contenedores con desplazamiento, imágenes y embebidos adaptables.
7. Revisa los tamaños intermedios. Arrastra lentamente el ancho del móvil al escritorio; los diseños suelen romperse hacia el ancho de tableta.
8. Prueba en un móvil real. Los emuladores no detectan cosas como el teclado en pantalla tapando un botón, las muescas o lo rápido que carga la web con datos móviles.

Errores comunes

• Probar solo con un tamaño de teléfono. Comprueba un móvil pequeño, uno grande y una tableta.
• Ocultar contenido en móvil para que quepa. Google indexa la versión móvil, y los usuarios del teléfono quieren la misma información.
• Desactivar el zoom en la etiqueta viewport.
• Imágenes de tamaño de escritorio en móviles, que cuestan tiempo de carga y datos.
• Elementos fijos que se acumulan: una cabecera fija, un banner de cookies y una burbuja de chat pueden tapar media pantalla del móvil.
• Ventanas emergentes que no se pueden cerrar en pantallas pequeñas porque el botón de cierre queda fuera de la pantalla.

Lista de verificación para móviles

• Etiqueta meta viewport presente; zoom sin desactivar
• Sin desplazamiento horizontal a 320 px en ninguna página
• Texto base de ~16 px; los campos no provocan zoom
• Áreas táctiles lo bastante grandes y separadas
• El menú funciona en móviles y con teclado
• Tablas legibles en móviles (tarjetas, menos columnas o contenedor con desplazamiento)
• Imágenes y embebidos se escalan; se sirven archivos del tamaño adecuado
• Los formularios usan los tipos de entrada correctos; el botón de envío es alcanzable
• Nada importante depende del cursor
• Probado en al menos un móvil real

Un diseño adaptable también forma parte de la accesibilidad: WCAG pide que el contenido funcione a 320 px de ancho y con un zoom del 200 %. Si construyes una app que la gente usará a diario en el móvil, cómo crear una app web optimizada para móviles va más allá, incluidas las PWA instalables.

Diseño adaptable en Mythex

Mythex construye apps web adaptables, y en Pro puede empaquetarlas como apps de Android y de iPhone. En el espacio de trabajo, haz clic en el icono del teléfono encima de la Vista previa (Cambiar a móvil) para ver tu app en un marco de tamaño móvil, y arrastra el borde del marco para probar otros anchos (Vista previa y código). La documentación incluye un prompt inicial breve para corregir el diseño en pantallas pequeñas en prompts adaptables a móviles. Comprueba también en un móvil real: abre la URL publicada o comparte un enlace de vista previa y ábrelo en tu teléfono.

Preguntas