Le cover della tastiera mobile interfacciano e non consentono all'utente di scorrere

Supporto
4

Questo è ciò che ha funzionato per me (nel mio 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`;
      }
    });
  }

Queste modifiche si traducono in un’esperienza utente molto migliore:

  • lo spazio limitato dello schermo è dedicato all’attività in corso (campi di immissione) anziché essere diviso tra modale e sfondo
  • i campi non vengono nascosti dalla tastiera, impedendo all’utente di scorrere
  • l’utente non deve chiudere, quindi aprire, quindi chiudere, quindi aprire la tastiera per compilare tutti i campi
  • l’utente non deve digitare alla cieca in un campo che non può vedere

C’è ancora qualche incoerenza tra i browser. Il ridimensionamento JS non sembra funzionare in Chromium, ma funziona in Brave e Firefox. Ma l’esperienza Chromium è comunque migliore con le modali in cima allo schermo, dove non c’è la tastiera.

Perché gli approcci CSS puri non hanno funzionato:

  • Non credo che env(keyboard-inset-height) funzioni al di fuori delle PWA su iOS
  • 100dvh in teoria funzionerebbe ma non sembra essere ancora supportato nel mio browser mobile

Ho anche sentito da persone che non riuscivano a trovare il pulsante di registrazione. Quindi:

Mostra sempre il pulsante di registrazione, non nasconderlo su mobile:

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

Tutti questi problemi impedivano alle persone di registrarsi al forum e di effettuare il loro primo post. Quindi, anche se può sembrare semplice, almeno per me queste sono state correzioni ad altissima priorità.

1 Mi Piace