uni-app适配刘海屏和灵动岛 uni-app安全区域safe-area配置

设auto时UniApp自动插入原生占位视图，高度约34pt并填满背景；设none则不占位，需手动控制留白；实际项目优先设auto，全屏场景才考虑none。 manifest.json 里 safearea.bottom.offset 设 auto 还是 none 直接看效果：设 ，UniApp 会在 App 端（仅 iOS/Android 原生渲染）底部插入一个原生占位视图，高度等于 Home Indicator 区域（约 34pt）， 颜色会填满这个区域；设 ，则完全不占位，内容直抵屏幕底边——但你得自己用 CSS 或 JS 控制留白，否则按钮会被遮挡。 实际项目中建议： 优先设 。它省事、稳定、兼容性好，尤其适合带原生 tabbar 的页面（tabbar 本身已预留安全区， 不会叠加空白）。只有当你需要全屏沉浸式交互（比如视频播放页、游戏页），才考虑 ，并配合 和手动 padding 控制。 env(safe-area-inset-bottom) 在哪些环境能用 是 CSS 环境变量，但它不是所有平台都支持： iOS WebView（Safari / 微信内置浏览器）：✅ 支持，且 fallback 写法 有效 Android 原生 WebView（App 端）：⚠️ 大部分不支持，尤其是低版本系统；即使支持，也可能因 Webview 内核差异表现不一致 微信小程序：❌ 完全不识别，真机也不行；模拟器更不可信 nvue 页面：❌ 不支持任何 CSS 环境变量，必须用 动态绑定 style 所以别只写一行 。稳妥写法是： 注意： 是旧版 iOS Safari 兼容写法，已废弃但仍有存量设备依赖，保留无害。 pages.json 里 navigationStyle: "custom" 对安全区的影响 启用 后，UniApp 会关闭原生导航栏，同时 自动禁用 manifest.json 中的 safearea.top 配置 ——也就是说，顶部安全区不再由原生层处理，你得自己用 或 补齐状态栏高度。 uni-app电商系统实战精讲课程课件 uni-app电商系统实战精讲课程 下载 但关键点是： 底部不受影响 。即使设置了 ，manifest 里的 依然生效。这意味着： 如果 manifest 设了 ，底部仍会有原生占位，你无需再加 padding 如果 manifest 设了 ，底部就真的“裸奔”了，必须手动加 bottom padding 或用 组件 常见错误：以为关了导航栏就万事大吉，结果底部按钮被 Home Indicator 挡住——其实是忘了检查 manifest 里 bottom 的配置是否匹配当前页面需求。 uView 的 u-safe-bottom 组件为什么比手写 CSS 更可靠 不是简单地加 ，它做了三件事： 运行时检测平台：只在 iOS App 和微信（iOS）真机上启用，其他环境自动跳过 智能判断占位状态：若 manifest 中 为 ，它会读取原生占位高度并归零自身 padding，避免双倍空白 兜底 fallback：当 不可用时，回退到 计算值 换句话说，它把 manifest 配置、平台差异、运行时环境全串起来了。你自己写 CSS 很难覆盖这么细的分支，尤其在混合部署（App + 小程序 + H5）项目里，漏掉一个平台就可能出视觉 bug。 真正容易被忽略的是：uView 的 在 nvue 页面里不生效（nvue 不支持自定义组件嵌套样式注入），这种场景必须回到 + 动态 style 的老路。