目录

问题点：

处理方案：

注意事项：

为什么 constant 必须写在 env 前面

@supports 检测不是可选，而是必须加

padding-bottom 是首选，别乱用 margin-bottom

viewport-fit=cover 是前提，否则 env() 根本不触发

---

问题：

自定义底部tabbar后，使用真机测试时，发现ios系统有的机型底部会有黑色的小横杠，会导致底部菜单按钮有遮挡的问题。

处理方案：

让应用能够自动获取当前设备由系统计算并提供的安全区域尺寸

uni-app 提供了一些内置的样式属性来帮助处理安全区域，特别是在使用H5和App（尤其是iOS）时。你可以在页面或组件的样式中使用 safe-area 属性来确保内容不会被子组件或键盘遮挡。

.footer {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS ≤ 11.2 */
  padding-bottom: env(safe-area-inset-bottom);       /* iOS ≥ 11.3, Safari 11.1+ */
}

说明及注意事项：

必须先写constant再写env，因iOS 11.2及更早版本仅识别constant()而忽略env()，iOS 11.3+则弃用constant()、采用env()；顺序颠倒将导致旧版无回退，且须配合@supports或检测及viewport-fit=cover才完整生效。

直接写 env(safe-area-inset-bottom) 不够，必须搭配 constant(safe-area-inset-bottom) 做双重声明，且顺序不能错——constant 必须写在 env 前面，否则 iOS 11.2 及更早版本会完全忽略。

1、为什么 constant 必须写在 env 前面

CSS 层叠规则决定了后声明的值会覆盖前声明的值，但前提是浏览器能识别它。iOS 11.2 只认 constant()，遇到不认识的 env() 就当无效值跳过；而 iOS 11.3+ 开始弃用 constant()、只支持 env()，此时它会忽略前面的 constant 声明，采用后面的 env 值。

所以正确顺序是：

.footer {   padding-bottom: constant(safe-area-inset-bottom); /* iOS ≤ 11.2 */   padding-bottom: env(safe-area-inset-bottom);       /* iOS ≥ 11.3, Safari 11.1+ */ }

• 写反了（env 在前、constant 在后），iOS 11.2 就彻底没 fallback
• 只写 env，等于放弃对 iOS 11.2 及更旧版本的支持
• 只写 constant，Safari 15.4+ 会警告并丢弃该声明（控制台可见 Unsupported CSS value）

2、@supports 检测不是可选，而是必须加

单纯靠双重声明还不够。某些安卓 WebView 或老旧桌面内核（如 Electron 旧版）会把 constant() 当作语法错误直接阻断整条 CSS 规则解析，导致后续 env() 也不生效。

必须用 @supports 包一层，确保只有真正支持的环境才加载这些声明：

@supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

• 不加 @supports，部分 Android 7.x 系统 WebView 会静默失败
• 不能只检测 env：iOS 11.2 不支持 @supports (padding-bottom: env(...))，会整个块被跳过
• 必须用 or 连接两个函数，兼容性覆盖才完整

3、padding-bottom 是首选，别乱用 margin-bottom

用 margin-bottom: env(safe-area-inset-bottom) 看似简单，但会导致页面可滚动高度异常增大，用户上滑时底部按钮突然“掉出”可视区——因为 margin 推开的是整个元素盒模型，而不是容器内部内容。

适用场景和写法要严格区分：

• padding-bottom：用于 <main>、<footer> 这类容器，让内容自然避开安全区
• margin-bottom：仅限 position: fixed; bottom: 0 的 tabbar，且必须配合 calc()：margin-bottom: calc(env(safe-area-inset-bottom) + 8px)
• bottom 直接设 env()：仅用于 position: absolute 元素，且父容器不能有 transform 或 will-change，否则 iOS 渲染失效

4、viewport-fit=cover 是前提，否则 env() 根本不触发

env(safe-area-inset-bottom) 不是“只要写了就返回数值”，它依赖视口是否扩展到底栏下方。没配 viewport-fit=cover，iOS Safari 就不会提供这个值——此时 env() 返回 0，你看到的“没效果”其实是配置缺失。

正确的 <meta> 标签必须包含：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

• 漏掉 viewport-fit=cover，所有 env 声明都白写
• 加了 user-scalable=no 会强制禁用 viewport-fit=cover（Safari 隐藏规则）
• 安卓 Chrome 不需要 viewport-fit 也能读取 env()，但 iOS 必须有

最常被忽略的一点：真机测试前，务必确认 viewport 标签已生效——开发工具模拟器有时会假装支持，但真机上一跑就露馅。

原文地址：原文