uniapp:官网：[](uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置 - DCloud问答)

安全区域(safe area)

安全区域定义为视图中未被导航栏、选项卡栏、工具栏或视图控制器可能提供的其他视图覆盖的区域。

问题：如果不考虑安全区域内容就会被遮挡

方案一：使用原生占位（仅App端支持）

manifest.json 文件 app-plus 节点下配下 safearea

"safearea": {  
    "background": "#CCCCCC",  
    "bottom": {  
        "offset": "auto"  
    }  
}

方案二：不使用原生占位（非App端可以不配置manifest）

manifest.json 文件 app-plus 节点下配下 safearea

复制代码"safearea": {  
    "bottom": {  
        "offset": "none"  
    }  
}

然后在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配，微信小程序模拟器不支持，以真机为准。

比如为列表底部添加内边距避开安全区，在 iPhoneX 上列表底部会有内边距，在其他设备上没有内边距：

<style>  
.list {  
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  /* 旧版iOS */
  padding-bottom: env(safe-area-inset-bottom);  /* 新版iOS及标准环境 */
}  
</style>

constant()的由来：这是iOS 11.2之前版本中WebKit内核专用的CSS函数，用于获取设备安全区域的边距值。例如，早期的iPhone X等设备需要依赖此函数实现刘海屏和底部小黑条的适配。

env()的引入：从iOS 11.2开始，苹果将constant()废弃并替换为标准的env()函数，后者是CSS全局支持的函数，且语法更规范。因此，新版本iOS设备需使用env()。