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

Unterstützung
1

Das ist immer noch ziemlich kaputt und beeinträchtigt meine Benutzer bei der Registrierung, Anmeldung und beim Erstellen/Bearbeiten von Beiträgen. Ich habe dies sowohl auf Telefonen als auch auf Tablets beobachtet. Ich glaube, mindestens eines der Tablets war ein iOS-Gerät, aber ich beobachte dies meistens unter Android.

Mein Forum ist geografisch lokal, daher kann ich oft beobachten, wie Leute persönlich damit interagieren.

Ich bin vorerst offen für eine CSS-Korrektur, und es wäre wahrscheinlich gut, wenn eine Korrektur in den Kern integriert würde. Ich werde hier Bescheid geben, wenn ich eine Lösung finde.

3 „Gefällt mir“
3

Hast du Dons CSS-Fix ausprobiert?

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

Ich werde beide Code-Sätze ausprobieren müssen, um zu testen. Da ich dieses Problem beim Bearbeiten von Formularvorlagen oder bei der Verwendung des Theme-Editors für CSS/HTML habe. Ich habe dafür einen Workaround gefunden, indem ich viele leere Zeilen hinzugefügt habe. Diese CSS-Fixes sehen viel besser aus.

6

Ich glaube, das Team arbeitet bereits daran

2 „Gefällt mir“
7

Es ist gut, dass es Aufmerksamkeit erhält… Aber wie ich erwähnt habe, funktioniert dvh in meinen Tests nicht.

1 „Gefällt mir“
8

Hey @bitmage, könntest du bitte Screenshots der Probleme posten, die du auf Android hast? Oder sogar Videos. Ich möchte sicherstellen, dass wir vom Gleichen sprechen. Danke!