フルスクリーンモバイルモード.どのようにハードそれはできますか?

あなたがフルスクリーン無限カレンダーとフルスクリーンのコンボボックスを実装するために必要な伝統的な入力を超えて、モバイルフレンドリーなフォームを実装する必要があると想像してください.フルスクリーンについて話しましょう.あなたはそれがどのように期待するか?ハードではない-ちょうどZ -インデックスと固定位置をフルスクリーンのdivを使用します.正しい?それは私が考えた.

試行番号1

Online example
使いましょうdiv すべての画面をカバーします

.FullScreenOne {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  background: #fff;
}

タブを使用することができます⌃ and ⌄ IOSでは、モーダルのカーソルを移動します.

試行番号2

Online example
用途Reach Dialog (前の解決に加えて).Dialog セットaria-hidden でのすべてのノードdocument.body 現在アクティブなダイアログを除くルート.これはダイアログ内の仮想カーソルをトラップします.
側注:私は試みましたreact-focus-lock , しかし、それはIOS⌃ and ⌄).
これは、ユーザーがモードのコンテンツをスクロールしたい場合を除き、動作しますが、代わりに、彼らはモーダルの背後にコンテンツをスクロールします.

試行番号3

Online example
用途 ScrollLocky (前の解決に加えて).ScrollLocky ブロックの残りの部分との相互作用をブロックするreact-locky and position: relative 体に
これは、ユーザーがスクロールし、モバイルSafariの取得の下のクロームのときに隠されているが、後には、下のクロームの外観をトリガすることが可能であり、モードの一部が非表示になりますが動作します.

試行番号4

Online example
用途 mobile-safari-fullscreen (前の解決に加えて).モーダルが開かれるとき、それは常にブラウザクロムの底を示すのを強制します.

側注:WindowSize を使うことができるmobile-safari-fullscreen . 私は、これが好ましい解決策であると言います、このデモは、多くの端ケースが可能であることを示すためにより多くです.

<WindowSize>
  {({ height }) => (
    <ul style={{ height }}>
      <li />
    </ul>
  )}
</WindowSize>

結論

この種の細かい細部はフロントエンドの開発を難しくしている.この投稿が好きならmy post about the UX of images on the web .
PSDifferent browser have the different behavior of focus . 最も顕著なのは、リンクやボタンに集中することができないモバイルサファリです¯\_(ツ)_/¯ .
チェックアウトthis GitHub repo このポストのための完全なコードのために.
フォローオンミーgithub .