uni-app适配刘海屏及全面屏 uni-app安全距离safe-area处理-uni-app-PHP中文网

安全距离必须动态获取并双路兜底（js api + css env），否则在iphone 14/15 dynamic island或横屏时必然露白、错位或遮挡；manifest.json中app-plus节点的safearea配置仅对app端原生层生效，不解决页面内布局问题。

uni-app适配刘海屏及全面屏 uni-app安全距离safe-area处理

直接说结论：安全距离不是靠猜或写死一个值，而是必须动态获取 + 双路兜底（JS API + CSS env），否则在 iPhone 14/15 的 Dynamic Island 或横屏切换时必然露白、错位或遮挡。

要，但只对 App 端生效，且仅控制原生层行为，不解决页面内布局问题。关键点如下：

app-plus 节点下配置 "safearea": { "bottom": { "offset": "auto" } }，会让原生 WebView 底部自动预留空间，避免内容被 Home Indicator 切掉
但该配置不会改变页面 <page></page> 或 <view></view> 的样式，底部背景色仍为白色（除非你同时配了 "background": "#000"）
微信小程序、H5 完全无视这个配置，offset: "none" 是更安全的默认值，避免跨端逻辑混乱
如果你用了原生 tabBar，无论这里怎么配，tabBar 下方都会强制留空——这是系统级行为，无法绕过

因为环境变量依赖 WebView 支持，而不同平台差异极大：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

iOS App 和 iOS 微信真机支持 env(safe-area-inset-bottom)，但微信开发者工具模拟器不支持，调试时容易误判
H5 环境（如 Safari、Chrome）需开启 viewport-fit=cover 才能触发 env 变量，否则返回 0 —— 必须在 <meta name="viewport"> 中显式加：viewport-fit=cover
Android 大部分 WebView 不识别 env()，此时 fallback 到 constant() 也无效，只能靠 JS 动态注入
正确写法必须带降级顺序：padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);

这不是 bug，是平台能力缺失的正常表现。不能假设所有端都返回完整 safeAreaInsets：

微信小程序需基础库 ≥2.10.4，且必须在 onShow 后调用，onLoad 阶段可能为空
H5 环境中 safeAreaInsets 恒为 undefined，必须用 CSS env() + viewport-fit 组合替代
支付宝小程序至今不支持该字段，只能硬编码 fallback 值（如 iPhone 14 Pro 底部约 34px，可设为 34）
建议封装工具函数，始终做空值判断：const bottom = systemInfo.safeAreaInsets?.bottom ?? 0，再转成 rpx

常见于页面设置了背景色但容器未覆盖到底部安全区边缘，本质是「背景色没透到底」：

只给内容 <view class="content"></view> 加 padding-bottom 不够，父级 <page></page> 或根 <view></view> 的背景色必须延伸到底部 —— 推荐在 App.vue 的 <style></style> 中全局设置：page { background-color: #000; }
使用 fixed 定位的 tabBar 或 footer，需手动加上 bottom: env(safe-area-inset-bottom)，否则会压住安全区
如果用了自定义导航栏，顶部也要同步处理：padding-top: env(safe-area-inset-top)，否则状态栏区域变黑或文字被裁
横屏时 safe-area-inset-bottom 可能变为 0（如 iPhone 14 Pro 横屏后底部无指示条），此时不应保留固定 padding，否则出现多余空白