安全区域

随着 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>

改进此文档