uni-app 运行到 iOS 真机（APP基座）底部有安全区域边距

在 uni-app 中，当运行到 iOS 真机时，底部可能会出现安全区域边距（Safe Area）的问题，这是因为 iOS 设备（如 iPhone X 及以后的机型）采用了全面屏设计，底部有一个安全区域，系统会自动为页面内容添加边距以避免内容被遮挡。

要解决这个问题，可以通过以下几种方式来处理：

1. 使用 env(safe-area-inset-bottom)

在 CSS 中，可以使用 env(safe-area-inset-bottom) 来获取底部的安全区域边距，并根据需要调整布局。

/* 在需要调整的样式表中 */
.bottom-area {
  padding-bottom: env(safe-area-inset-bottom);
}

2. 使用 uni-app 提供的 safe-area-inset 样式类

uni-app 提供了 safe-area-inset 样式类，可以直接在页面中使用。

<view class="safe-area-inset-bottom">
  <!-- 内容 -->
</view>

3. 使用 viewport-fit=cover

在 manifest.json 中配置 viewport-fit=cover，以确保页面内容覆盖整个屏幕，包括安全区域。

{
  "app-plus": {
    "statusbar": {
      "immersed": true
    },
    "safearea": {
      "bottom": {
        "offset": "none"
      }
    }
  }
}

4. 手动调整样式

如果你希望手动调整样式，可以通过 JavaScript 动态获取安全区域的边距，并应用到页面元素上。

const safeArea = uni.getSystemInfoSync().safeArea;
const bottomMargin = safeArea.bottom - safeArea.height;

// 根据 bottomMargin 调整页面样式

5. 使用 uni-app 的 safe-area 组件

uni-app 提供了 safe-area 组件，可以方便地处理安全区域的问题。

<safe-area mode="bottom">
  <!-- 内容 -->
</safe-area>

6. 全局配置

在 pages.json 中，可以为所有页面配置安全区域的处理方式。

{
  "globalStyle": {
    "safeArea": {
      "bottom": {
        "offset": "none"
      }
    }
  }
}