Mobile Keyboardがインターフェースを覆い、ユーザーがスクロールできない

サポート
4

これが私（私のテーマ）で機能したことです。

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

これらの変更により、UXが大幅に向上します。

  • 限られた画面スペースが、モーダルと背景の分割ではなく、タスク（入力フィールド）に専念します。
  • キーボードによってフィールドが隠され、ユーザーがスクロールできなくなることはありません。
  • ユーザーは、すべてのフィールドに入力するために、キーボードを閉じて開き、閉じて開く必要はありません。
  • ユーザーは、見えないフィールドに盲目的に入力する必要はありません。

ブラウザ間にはまだ一貫性がありません。JSのリサイズはChromiumでは機能しないようですが、BraveとFirefoxでは機能します。しかし、Chromiumのエクスペリエンスは、キーボードがない画面の上部にあるモーダルで、それでも優れています。

純粋なCSSアプローチが機能しなかった理由：

  • env(keyboard-inset-height) は、iOSのPWA以外では機能しないと思います。
  • 理論的には 100dvh は機能しますが、私のモバイルブラウザではまだサポートされていないようです。

サインアップボタンが見つからないという人もいました。そのため：

サインアップボタンを常に表示し、モバイルでは非表示にしない：

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

これらの問題はすべて、人々がフォーラムにサインアップしたり、最初の投稿を作成したりするのを妨げていました。そのため、単純に聞こえるかもしれませんが、少なくとも私にとっては、これらは非常に優先度の高い修正でした。

「いいね！」 1