セーフエリア

iPhone Xのリリース以降、Appleはセーフエリアと呼ばれる領域を導入し、その後Google ChromeもAndroidでサポートしました。

セーフエリアのあるデバイス（上部のノッチなど）では、アプリのUIは、縦向きでは上下に追加のスペースを、横向きでは左右に追加のスペースを含める必要があります（ノッチや新しいボトムバーを考慮するため）。

縦向きではFramework7が自動的に必要なスタイルの修正を行いますが、横向きでは要素に追加のクラスを追加する必要があります。

safe-areas - 横向きで画面の左右の端に張り付く要素に追加します。
safe-area-left - 横向きで画面の左端に張り付く要素に追加します。
safe-area-right - 横向きで画面の右端に張り付く要素に追加します。
no-safe-areas - 水平方向の追加スペースを削除するために、safe-areas の内部にある要素に追加します。
no-safe-area-left - 左側の追加スペースを削除するために、safe-areas の内部にある要素に追加します。
no-safe-area-right - 右側の追加スペースを削除するために、safe-areas の内部にある要素に追加します。

以下の要素にはこれらのクラスは必要ありません。

ポップアップ、シート - 既に左右両側に余分なスペースが必要な全画面要素として考慮されています。
左パネル - 既に左端に張り付く要素として考慮されており、左側に余分なスペースが必要です。
右パネル - 既に右端に張り付く要素として考慮されており、右側に余分なスペースが必要です。

これらのクラスを使用したアプリレイアウトの例を示します。

<body>
  <!-- app root -->
  <div id="app">

    <!-- left panel doesn't require any additional classes -->
    <div class="panel panel-left panel-cover">
      ...
    </div>

    <!-- right panel doesn't require any additional classes -->
    <div class="panel panel-right panel-reveal">
      ...
    </div>

    <!-- main view, full-wide element, add "safe-areas" class -->
    <div class="view view-main view-init safe-areas" data-url="/">
      <div class="page">
        <div class="navbar">
          ...
        </div>
        <div class="page-content">
          <!-- full-wide list, will inherit safe-areas from view -->
          <div class="list">
            ...
          </div>
          <!-- full-wide content block, will inherit safe-areas from view -->
          <div class="block">
            ...
          </div>
          <!--
            two-columns blocks: need to
              - remove extra spacing on right side for left block
              - remove extra spacing on left side for right block
          -->
          <div class="row">
            <!-- remove right spacing on left block -->
            <div class="block col no-safe-area-right">
              ...
            </div>
            <!-- remove left spacing on right block -->
            <div class="block col no-safe-area-left">
              ...
            </div>
          </div>
          ...
        </div>
      </div>
    </div>
  </div>
  ...
</body>

このドキュメントを改善する