安全区域

随着 iPhone X 的发布以及之后，苹果引入了所谓的 **安全区域**，随后被 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>

改进此文档