env(safe-area-inset-bottom) 必须配合 viewport-fit=cover 才生效，且仅适用于 padding/margin；需前置 fallback 值或用 max() 兜底，禁用 constant() 与 env() 混写。

env(safe-area-inset-bottom) 必须配合 viewport-fit=cover 才生效

不加 viewport-fit=cover，env(safe-area-inset-bottom) 在 Safari（包括 iOS 微信、QQ 等 WebView）里永远返回 0，不是语法错，是环境没启用。它不是“浏览器支持就自动有值”，而是“视口被允许延伸进安全区后，才注入变量”。

正确的 <meta> 写法必须同时包含三项：

• width=device-width
• initial-scale=1
• viewport-fit=cover

缺一不可。只写 viewport-fit=cover 没用；写了但 user-scalable=yes，双指缩放后也可能重置安全区上下文，导致值突变为 0。

不能直接写 bottom: env(safe-area-inset-bottom)

env(safe-area-inset-bottom) 只能用于 padding 或 margin，不能用于 bottom、height、top 等定位/尺寸属性——WebKit 不允许它参与布局计算以外的解析，写了等于没写，CSS 声明会被整个丢弃。

常见错误写法：

• bottom: env(safe-area-inset-bottom) → 无效，元素仍卡在 Home Indicator 里
• height: calc(100vh - env(safe-area-inset-bottom)) → Safari 15.4 之前完全不认，之后也仅限加减，不支持乘除

正确做法是作用于容器内边距，比如给 .tab-bar 加 padding-bottom: env(safe-area-inset-bottom)，或给全屏 flex 容器加 padding-bottom，让内容“撑开”而不是“推下去”。

fallback 值必须写在 env() 前面，且需用 max() 防兜底失效

CSS 是按顺序解析的，后声明覆盖前声明。所以 fallback 必须写在前面：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

padding-bottom: 16px;
padding-bottom: env(safe-area-inset-bottom);

如果反过来，不支持的环境会直接跳过整条 env() 声明，fallback 就不会生效。

更稳妥的是用 max()：

padding-bottom: max(16px, env(safe-area-inset-bottom));

因为某些 iPad mini 横屏时 env(safe-area-inset-bottom) 返回 0，纯 fallback 值可能太小；而 max() 能确保最小留白不跌破设计底线，又不浪费真实安全区空间。

不要混用 constant() 和 env() 在同一声明里

constant(safe-area-inset-bottom) 是 iOS 11.0–11.1 的遗留语法，iOS 11.2+ 已移除。但它在部分安卓 WebView（如旧版 UC）里反而比 env() 更稳定。所以兼容写法是分开声明、不合并：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

别写成 padding-bottom: constant(safe-area-inset-bottom), env(safe-area-inset-bottom) —— 这是非法语法，整条声明失效。也别依赖 @supports 单独检测 env()，iOS 11.2 不支持该检测，整个块会被跳过；要用 @supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom))。

实际最易忽略的一点：env() 值是动态的，横竖屏切换、弹出键盘、甚至某些微信版本的导航栏展开，都可能触发它变化。但 CSS 本身不会重排，除非你用了 padding-bottom 这类影响盒模型的属性——所以千万别只对 fixed 元素设 margin-bottom，那会导致滚动高度异常，按钮突然“掉出”可视区。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！