Arreglar el solapamiento del teclado móvil con VisualViewport

Introducción: en pantallas móviles los inputs fijados al fondo suelen quedar ocultos cuando aparece el teclado virtual. Las unidades vh y dvh no siempre reflejan la altura visible real después de que se abre el teclado, por lo que el campo de entrada puede acabar debajo del teclado y la experiencia de usuario se rompe.

Solución robusta: utilizar la API VisualViewport para sincronizar la altura visible real con una variable CSS por ejemplo --app-height y consumir esa variable en lugar de dvh o vh. De este modo el layout responde a la altura efectiva de la vista cuando el teclado está abierto.

Paso 1 pequeño componente cliente: crear un componente que al montarse calcule la altura usando visualViewport.height cuando esté disponible o window.innerHeight como respaldo, y copie ese valor a la propiedad CSS documentElement.style.setProperty --app-height en píxeles. El componente debe escuchar eventos resize y scroll de visualViewport y resize de window para mantener la variable actualizada y debe limpiar los listeners al desmontarse.

Paso 2 montar una vez en la raíz de la aplicación: asegurar que el observador de viewport se monta una sola vez en el layout global por ejemplo en app layout en Next.js o en el componente de entrada de la app para que todas las vistas compartan la misma variable y no haya cálculos redundantes.

Paso 3 consumir la variable en CSS: usar la variable --app-height en contenedores de altura completa por ejemplo height con var(--app-height, 100dvh) de forma que exista un fallback si la variable no está lista. De esta forma componentes como chats inputs y barras pegadas al pie respetan la altura visible real y no quedan cubiertos por el teclado.

Por qué funciona: visualViewport.height es la fuente de verdad para la altura visible tras la apertura del teclado. Al replicar ese valor en una variable CSS la interfaz se adapta al viewport visual real, evitando la superposición del teclado y mejorando la usabilidad en móviles.

Mejora progresiva: mantener la meta viewport con interactive-widget=resizes-content mejora el comportamiento en Chromium y Android aunque iOS Safari no siempre lo respete. La combinación de meta viewport cuando está soportado y la sincronización mediante VisualViewport ofrece la solución más amplia y confiable.

Ejemplos y referencia: esta técnica se ha usado en proyectos reales como Sparka repositorio en https://github.com/franciscomoretti/sparka donde se puede ver una implementación práctica del patrón visualViewport a css variable para proteger inputs y contenedores de altura completa.

Sobre Q2BSTUDIO: somos Q2BSTUDIO empresa de desarrollo de software y aplicaciones a medida especializados en soluciones a medida para empresas. Ofrecemos software a medida desarrollo de aplicaciones a medida inteligencia artificial y servicios de ciberseguridad. Implementamos servicios cloud aws y azure y soluciones de servicios inteligencia de negocio e inteligencia artificial para empresas. Desarrollamos agentes IA ia para empresas integraciones con power bi y plataformas de analítica para convertir datos en decisiones. Nuestro enfoque combina experiencia en ciberseguridad con arquitecturas cloud seguras y despliegues escalables para ofrecer soluciones de software a medida que impulsan la transformación digital.

Llamada a la acción: si necesitas evitar que el teclado móvil oculte entradas en tu aplicación o quieres desarrollar una aplicación a medida con integración de inteligencia artificial y ciberseguridad contacta a Q2BSTUDIO para diseñar una solución basada en buenas prácticas como la sincronización VisualViewport y en servicios cloud aws y azure análisis con power bi agentes IA y servicios inteligencia de negocio.

Palabras clave: aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi.