viewport-fit=cover是启用env(safe-area-inset-bottom)的硬性前提，不加则iOS返回0px；必须在meta中显式声明，且constant()需写在env()前以兼容iOS各版本。
viewport-fit=cover 是硬性前提，不加就完全失效
env(safe-area-inset-bottom) 在 iOS 上根本不会返回有效值，如果你没在 里声明 viewport-fit=cover。这不是可选优化，是开关——关着的时候，env() 函数连读取设备安全区的能力都没有，所有计算结果都是 0px，底部按钮照常被 Home Indicator 或动态岛吃掉。
必须写成这样：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意三点：
-
viewport-fit=cover必须和width=device-width同时存在，单独加 cover 不生效 - 安卓 WebView 大部分不支持该属性，但加了也无害；不加则 iOS 直接放弃安全区感知
- 微信内置浏览器（X5内核）从 iOS 15+ 开始支持，但旧版仍需 fallback，不能只依赖它
env() 和 constant() 的回退顺序不能颠倒
iOS 11.2 是分水岭：constant() 仅在 iOS ≤11.1 生效，env() 从 iOS 11.2+ 开始成为标准。如果把 env() 写在前面、constant() 写在后面，旧系统会直接忽略整条声明（因为不认识 env()），导致 padding 归零。
正确写法是：
padding-bottom: constant(safe-area-inset-bottom);<br>padding-bottom: env(safe-area-inset-bottom);
浏览器按顺序解析，旧版 iOS 执行第一行后停住，新版跳过第一行执行第二行。关键点：
- 两行必须分开写，不能用
calc()混合（如calc(constant(...) + env(...))会同时失败） -
constant()已被 Safari 官方弃用，仅作兼容，新项目可考虑只保留env()+ JS 降级 - 安卓端始终返回
0px，所以必须搭配 JS 检测或默认 fallback 值（如env(safe-area-inset-bottom, 0)）
只对 fixed/absolute 元素生效，普通流式布局要换思路
env(safe-area-inset-bottom) 的作用对象有限：只有 position: fixed 或 position: absolute 的底部落位元素（比如底部 TabBar、悬浮按钮）才需要它来“顶开”系统 UI。普通文档流里的 或 flex 布局容器，靠 padding-bottom 就能撑开空间，但要注意位置。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
常见误用场景：
- 给
body直接加padding-bottom: env(safe-area-inset-bottom)—— 无效，因为 body 默认不是定位元素，且可能被 viewport 高度截断 - 在
height: 100vh的容器里加 padding —— 会溢出，应改用min-height: 100vh+padding-bottom - 全屏视频页用
object-fit: cover时，字幕层必须用position: absolute; bottom: env(safe-area-inset-bottom)，否则字幕贴底就被遮
env() 返回的是长度值，不能直接参与 calc() 运算而不带单位
env(safe-area-inset-bottom) 返回的是带单位的 CSS 长度（如 34px），但很多人在 calc() 里漏写单位，写成 calc(100vh - env(safe-area-inset-bottom))，这在 Safari 16.4+ 会报错或计算为 0。
稳妥写法是显式补单位，或用 fallback：
height: calc(100vh - env(safe-area-inset-bottom, 0px));
更推荐的实践是：
- 避免在
calc()中裸用env()，优先用padding/margin直接赋值 - 若必须参与运算，fallback 值务必带单位（
0px而非0） - 横屏时
safe-area-inset-bottom可能变为0px，而safe-area-inset-left/right显著增大，需用媒体查询配合处理
真正容易被忽略的，是横竖屏切换时安全区变量的动态变化——它不是一次计算完就固定了，而是实时响应的。如果你的页面支持旋转，记得测试横屏下左右 inset 是否把内容挤出可视区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
