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

Soutien
1

C’est toujours assez problématique, et cela affecte mes utilisateurs lors de l’inscription, de la connexion et lors de la création/modification de messages. J’ai observé cela sur des téléphones et des tablettes. Je pense qu’au moins une des tablettes était un appareil iOS, mais j’observe surtout cela sur Android.

Mon forum est localisé géographiquement, donc j’ai souvent l’occasion d’observer les gens interagir avec en personne.

Je suis ouvert à une solution CSS pour le moment, et il serait probablement bon qu’une correction soit intégrée au cœur du système. Je mettrai à jour ici si je trouve une solution.

3 « J'aime »
3

Avez-vous essayé la correction CSS de Don ?

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 »
5

Je vais devoir essayer les deux ensembles de code pour tester. Comme j’ai ce problème lors de la modification des modèles de formulaire ou de l’utilisation de l’éditeur de thème pour le CSS/html. J’ai trouvé une solution de contournement pour ceux-ci en ajoutant un tas de lignes vides. Ces corrections CSS semblent beaucoup mieux.

6

Je pense que l’équipe travaille déjà sur cela

2 « J'aime »
7

C’est bien qu’elle reçoive de l’attention… Mais comme je l’ai mentionné, dvh ne fonctionne pas lors de mes tests.

1 « J'aime »
8

Hé @bitmage, pourrais-tu poster des captures d’écran des problèmes que tu rencontres sur Android s’il te plaît ? Ou même des vidéos. Je veux être sûr que nous parlons de la même chose. Merci !