Mobiltastatur deckt die Oberfläche ab und erlaubt kein Scrollen.

Unterstützung
4

Das hat für mich funktioniert (in meinem Theme):

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

Diese Änderungen führen zu einer deutlich besseren Benutzererfahrung (UX):

  • Der begrenzte Bildschirmbereich wird für die eigentliche Aufgabe (Eingabefelder) genutzt, anstatt zwischen Modal und Hintergrund aufgeteilt zu werden.
  • Felder werden nicht von der Tastatur verdeckt, sodass der Benutzer nicht scrollen kann.
  • Der Benutzer muss nicht erst schließen, dann öffnen, dann schließen und dann die Tastatur öffnen, um alle Felder auszufüllen.
  • Der Benutzer muss nicht blind in ein Feld tippen, das er nicht sehen kann.

Es gibt immer noch einige Inkonsistenzen zwischen den Browsern. Die JS-Größenänderung scheint in Chromium nicht zu funktionieren, aber in Brave und Firefox schon. Aber die Chromium-Erfahrung ist immer noch besser mit den Modals oben auf dem Bildschirm, wo die Tastatur nicht ist.

Warum reine CSS-Ansätze nicht funktioniert haben:

  • Ich glaube nicht, dass env(keyboard-inset-height) außerhalb von PWAs unter iOS funktioniert.
  • 100dvh würde theoretisch funktionieren, scheint aber in meinem mobilen Browser noch nicht unterstützt zu werden.

Ich habe auch von Leuten gehört, dass sie den Anmeldebutton nicht finden konnten. Daher:

Anmeldebutton immer anzeigen, nicht auf Mobilgeräten ausblenden:

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

All diese Probleme hinderten die Leute daran, sich für das Forum anzumelden und ihren ersten Beitrag zu erstellen. Auch wenn es einfach klingen mag, waren dies zumindest für mich extrem wichtige Korrekturen.

1 „Gefällt mir“