5 Pequeños Problemas de la Web Móvil (y Cómo Solucionarlos)

Has probado tu diseño en cada breakpoint, tu grid responsivo se ve impecable y todo funciona bien en Chrome DevTools. Luego abres el sitio en un teléfono real y algo está ligeramente, obstinadamente mal. Estos son los pequeños problemas de la web móvil — bugs menores que no rompen la página pero degradan silenciosamente la experiencia.

Aquí hay cinco que aparecen repetidamente en proyectos reales, y las soluciones modernas para cada uno.

1. Los Diseños de Altura Completa Fallan Debido a 100vh

Síntoma: Un hero de pantalla completa o modal es ligeramente demasiado alto en iOS Safari, causando que el contenido se recorte o aparezca una barra de desplazamiento.

Por qué sucede: 100vh se calcula contra la altura completa del viewport, ignorando la interfaz de usuario dinámica del navegador (barra de direcciones y controles de navegación). Cuando esos elementos están visibles, 100vh se desborda.

La solución: Usa las nuevas unidades de viewport de CSS. Para la mayoría de los diseños de altura completa, 100svh (small viewport height) es una opción estable porque representa el área visible con la interfaz del navegador presente. Usa 100dvh cuando quieras que el diseño se redimensione dinámicamente a medida que la interfaz del navegador se oculta y muestra. El soporte de navegadores modernos para estas unidades está ampliamente disponible, como se muestra en https://webstatus.dev/features/viewport-unit-variants.

.hero {
  height: 100svh; /* stable default */
}

2. La Interfaz Fija en la Parte Inferior Queda Oculta Detrás de las Áreas Seguras del Dispositivo

Síntoma: Un footer fijo, barra de navegación inferior o botón de acción está parcialmente oculto por el indicador de inicio en iPhone o por otras áreas seguras del dispositivo.

Por qué sucede: Los elementos fijos posicionados en bottom: 0 se sitúan al ras del borde del viewport, no del área segura del dispositivo. En dispositivos con indicadores de inicio o esquinas redondeadas, la interfaz del sistema puede superponerse al elemento.

La solución: Añade viewport-fit=cover a tu meta viewport tag, luego usa variables de entorno de área segura de CSS como env(safe-area-inset-bottom) para empujar el elemento hacia arriba.

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

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

3. iOS Hace Zoom en los Inputs de Formulario

Síntoma: Tocar un <input> en iOS Safari hace que la página haga zoom inesperadamente, interrumpiendo el diseño.

Por qué sucede: iOS Safari automáticamente hace zoom cuando el tamaño de fuente de un input es menor a 16px, tratándolo como una ayuda de legibilidad.

La solución: Establece font-size: 16px (o mayor) en todos los inputs. No deshabilites el zoom mediante user-scalable=no — eso perjudica la accesibilidad. Mientras lo haces, usa inputmode para solicitar el teclado correcto, autocomplete para reducir la fricción, y enterkeyhint para etiquetar la tecla de retorno.

<input
  type="email"
  inputmode="email"
  autocomplete="email"
  enterkeyhint="done"
  style="font-size: 16px;"
/>

4. El Scroll se Filtra Fuera de Modales y Drawers

Síntoma: Cuando un usuario se desplaza dentro de un modal o bottom sheet y llega al final, la página detrás también comienza a desplazarse.

Por qué sucede: Esto es encadenamiento de scroll — el navegador propaga eventos de scroll al padre cuando el contenedor de scroll hijo alcanza su límite.

La solución: Aplica overscroll-behavior: contain al contenedor desplazable. El soporte de navegadores modernos es amplio, incluyendo Safari 16 y posteriores, como se muestra en https://webstatus.dev/features/overscroll-behavior.

.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

5. Los Objetivos Táctiles se Sienten Lentos o Activan el Elemento Incorrecto

Síntoma: Los botones se sienten lentos, o los toques se registran en el elemento incorrecto — especialmente en interfaces densas como menús de navegación o listas.

Por qué sucede: Los objetivos táctiles demasiado pequeños crean ambigüedad en la detección de toques. Los navegadores modernos manejan eventos de toque sin el histórico retraso de 300ms (siempre que tu meta viewport tag sea correcto), pero los objetivos de tamaño insuficiente aún causan toques perdidos o mal dirigidos.

La solución: Apunta a objetivos táctiles alrededor de la recomendación de tamaño de objetivo de WCAG de aproximadamente 44×44 píxeles CSS. Usa padding en lugar de margin para expandir el área de interacción sin afectar el diseño.

.nav-link {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

Conclusión

Estos pequeños problemas de la web móvil rara vez aparecen aislados — un diseño que se recorta, un botón que se oculta, un formulario que hace zoom. Cada uno es menor por sí solo, pero juntos señalan un sitio que realmente no fue probado en un dispositivo. El CSS moderno te brinda herramientas limpias basadas en estándares para abordar todos ellos. Aplica estas soluciones una vez y se mantendrán a medida que los navegadores evolucionen.

Preguntas Frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..