セーフエリア

iPhone Xのリリース以降、Appleはいわゆるセーフエリアを導入しました。

セーフエリアのあるデバイス（トップスクリーンのノッチがあるような）では、アプリの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 の中にある要素に追加して、追加の右のスペーシングを取り除きます。

以下の要素には、このようなクラスは必要ありません。

Popup, Sheet - 既にフルスクリーンの要素として考えられており、左右両方に余分なスペーシングが必要となります。
左パネル - すでに、画面の左端にくっついていて、左側に余分なスペーシングが必要な要素とみなされています。
右パネル - 右画面の端に貼り付けられ、右側に余分なスペースを必要とする要素として既に考慮されています。

このようなクラスを持つアプリのレイアウト例を示します。

<body>
  <!-- アプリのルート -->
  <div id="app">

    <!-- 左パネルには追加のクラスは必要ありません -->
    <div class="panel panel-left panel-cover">
      ...
    </div>

    <!-- 右パネルには、追加のクラスは必要ありません。 -->
    <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">
          <!-- フルワイドリスト：セーフエリアをビューから継承します。 -->
          <div class="list">
            ...
          </div>
          <!-- フルワイドのコンテンツブロックは、ビューからセーフエリアを継承する。 -->
          <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">
            <!-- 左ブロックの右スペースを削除 -->
            <div class="block col no-safe-area-right">
              ...
            </div>
            <!-- 右ブロックの左余白を削除 -->
            <div class="block col no-safe-area-left">
              ...
            </div>
          </div>
          ...
        </div>
      </div>
    </div>
  </div>
  ...
</body>