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

サポート
1

これはまだかなり壊れており、サインアップ、ログイン、投稿の作成/編集時にユーザーに影響を与えています。スマートフォンとタブレットの両方でこの現象を確認しました。タブレットの少なくとも1台はiOSデバイスだったと思いますが、主にAndroidでこれを確認しています。

私のフォーラムは地理的にローカルなので、しばしば対面で人々がそれとやり取りするのを観察することができます。

現時点ではCSSの修正も検討しており、コアに修正が取り込まれると良いでしょう。解決策を見つけたらここに追記します。

「いいね！」 3
3

DonのCSS修正を試しましたか？

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
5

コードの両方のセットをテストする必要があります。フォームテンプレートの編集時や、CSS/HTMLのテーマエディタの使用時にこの問題が発生するためです。それらについては、空行をたくさん追加することで回避策を見つけました。これらのCSS修正は、はるかに見栄えが良いです。

6

チームはすでにそれに取り組んでいると思います

「いいね！」 2
7

注目されているのは良いことですが、私がテストしたところ dvh は機能しませんでした。

「いいね！」 1
8

やあ @bitmage、Androidで直面している問題のスクリーンショットを投稿してもらえますか？それとも動画でも構いません。同じ問題について話していることを確認したいだけです。ありがとう！