uni-app移动端应用开发底部安全区域适配

针对IOS机型，底部安全区域是系统动态计算的，所以我们也需要动态获取底部安全区域来适配

在 uniapp 的manifest.json ，打开源码视图，对需要适配的页面添加如下配置

"styles": {
  "safeArea": {
    "bottom": "auto"
  }
}

如果使用CSS。一种常见的方法是使用padding-bottom或margin-bottom属性，并使用vh-unit单位来确保底部安全距离不受屏幕尺寸变化的影响。

<template>
  <view class="content">
    <!-- 页面内容 -->
  </view>
</template>
 
<style>
  /* 为了确保内容不被底部安全距离遮挡，可以使用calc()来计算 */
  .content {
    padding-bottom: calc(100px + constant(safe-area-inset-bottom));
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
</style>

这段代码中，calc()函数用于结合固定值和安全区域边距，确保底部有额外的100px的距离。constant()是一个Webkit内核的私有属性，用于兼容旧版iOS，而env()是一个较新的属性，可以同时兼容新旧版本。两者都用于访问安全区域的底部边距。