安全區域

隨著 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>

改善此文件