Le clavier mobile couvre l'interface et n'autorise pas l'utilisateur à faire défiler

Soutien
4

Voici ce qui a fonctionné pour moi (dans mon thème) :

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`;
      }
    });
  }

Ces changements améliorent considérablement l’expérience utilisateur :

  • L’espace d’écran limité est consacré à la tâche en cours (champs de saisie) au lieu d’être divisé entre la modale et l’arrière-plan.
  • Les champs ne sont pas masqués par le clavier, empêchant l’utilisateur de faire défiler.
  • L’utilisateur n’a pas à fermer, puis ouvrir, puis fermer, puis ouvrir le clavier pour remplir tous les champs.
  • L’utilisateur n’a pas à taper à l’aveugle dans un champ qu’il ne peut pas voir.

Il y a encore une certaine incohérence entre les navigateurs. Le redimensionnement JS ne semble pas fonctionner dans Chromium, mais il fonctionne dans Brave et Firefox. Cependant, l’expérience Chromium est toujours meilleure avec les modales en haut de l’écran, là où le clavier n’est pas.

Pourquoi les approches CSS pures n’ont pas fonctionné :

  • Je ne pense pas que env(keyboard-inset-height) fonctionne en dehors des PWA sur iOS.
  • 100dvh en théorie fonctionnerait, mais ne semble pas encore être pris en charge dans mon navigateur mobile.

J’ai également entendu dire que certaines personnes ne trouvaient pas le bouton d’inscription. Donc :

Affichez le bouton d’inscription tout le temps, ne le cachez pas sur mobile :

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

Tous ces problèmes empêchaient les gens de s’inscrire au forum et de faire leur premier post. Donc, bien que cela puisse sembler simple, pour moi au moins, il s’agissait de corrections extrêmement prioritaires.

1 « J'aime »