La cubierta del teclado móvil cubre la interfaz y no permite que el usuario desplácese

Soporte
4

Esto es lo que me funcionó (en mi tema):

custom.scss:

.mobile-view .modal {
  top: 0;
  height: 100vh;
  align-items: flex-start;
}
.mobile-view .modal .d-modal__container {
  height: 100vh;
}

.mobile-view #reply-control.open {
  top: 0;
  height: 100vh;
}

common/head_tag.html:

  const is_mobile = !!document.querySelector('.mobile-view')
  if (window.visualViewport && is_mobile) {
    window.visualViewport.addEventListener('resize', () => {
      const modal = document.querySelector('.mobile-view .modal .d-modal__container');
      if (modal) {
        modal.style.maxHeight = `${window.visualViewport.height}px`;
      }
      const dialog = document.querySelector('.mobile-view #reply-control.open');
      if (dialog) {
        dialog.style.maxHeight = `${window.visualViewport.height}px`;
      }
    });
  }

Estos cambios dan como resultado una UX mucho mejor:

  • el espacio limitado de la pantalla se dedica a la tarea en cuestión (campos de entrada) en lugar de dividirse entre el modal y el fondo
  • los campos no quedan ocultos por el teclado, y el usuario no puede desplazarse
  • el usuario no tiene que cerrar, luego abrir, luego cerrar, luego abrir el teclado para rellenar todos los campos
  • el usuario no tiene que escribir a ciegas en un campo que no puede ver

Todavía hay cierta inconsistencia entre navegadores. El redimensionamiento de JS no parece funcionar en Chromium, pero sí en Brave y Firefox. Pero la experiencia en Chromium sigue siendo mejor con los modales en la parte superior de la pantalla, donde no está el teclado.

Por qué los enfoques de CSS puro no funcionaron:

  • No creo que env(keyboard-inset-height) funcione fuera de las PWA en iOS
  • 100dvh en teoría funcionaría, pero parece que aún no es compatible en mi navegador móvil

También escuché de personas que no podían encontrar el botón de registro. Entonces:

Mostrar el botón de registro todo el tiempo, no ocultarlo en dispositivos móviles:

.panel .header-buttons .sign-up-button {
  display: inline-flex;
}

Todos estos problemas impedían que las personas se registraran en el foro y que hicieran su primera publicación. Por lo tanto, aunque pueda parecer simple, al menos para mí estos fueron arreglos de altísima prioridad.

1 me gusta