必须添加 padding-bottom: env(safe-area-inset-bottom) 并配合 viewport-fit=cover，否则 ios 底部 home indicator 会遮挡固定定位导航栏；env() 动态返回安全区高度，但仅在 viewport-fit=cover 下生效，且需作用于 fixed 底部容器而非 body。
为什么 padding-bottom 加 env(safe-area-inset-bottom) 是必须的
不加这层适配，iOS 底部横条（Home Indicator）会遮挡你的导航栏，尤其在全屏或 Web App 模式下。单纯用固定高度（比如 60px）在 iPhone X 及之后机型上会留白过多或被裁切——因为不同机型的底部安全区高度不同（iPhone SE 是 0，iPhone 15 Pro 是 34px），硬编码必然出错。
真正起作用的是 env(safe-area-inset-bottom)，它由系统动态提供当前设备的安全区偏移值，但这个值默认只在「视口包含安全区」时生效，所以得配合 viewport 配置。
- 必须在
<meta name="viewport">中加上viewport-fit=cover，否则env()返回0 -
padding-bottom要写在底部固定定位的容器上（比如footer或.tab-bar），不能只靠body或根元素撑开 - 不要用
calc(60px + env(safe-area-inset-bottom))硬加——如果系统返回0（如 Android 或旧 iOS），反而多出空白
如何正确声明 viewport 并启用 safe-area
viewport-fit=cover 不是可选配置，它是开启 env() 动态值的前提。没它，env(safe-area-inset-bottom) 就是无效常量，CSS 会直接忽略或退化为 0。
标准写法只有一行，放在 中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- Android 浏览器（Chrome、Edge）会忽略
viewport-fit，但不会报错，env()返回0，此时padding-bottom: env(safe-area-inset-bottom)实际为0，不影响布局 - iOS Safari 必须有
viewport-fit=cover才能读取真实值；漏掉就永远拿不到底部高度 - 不要写成
viewport-fit=contain或省略，这两者都导致安全区被裁剪，env()失效
底部导航容器的 CSS 写法与兼容性处理
最简健壮写法是：给导航容器设 position: fixed; bottom: 0;，再用 padding-bottom 向上顶出安全区空间。不推荐用 margin-bottom 或 height 配合 env()，容易引发重排或高度坍缩。
示例（假设类名是 .tab-bar）：
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: env(safe-area-inset-bottom);
/* 回退方案：当 env() 不可用时，用 0 或最小安全值 */
padding-bottom: max(0px, env(safe-area-inset-bottom));
}
-
max(0px, env(...))是关键回退——避免某些旧版 Safari 把无效env()解析成负值导致布局错乱 - 别在
body上加padding-bottom：移动端滚动时body高度不可靠，且固定定位元素会脱离文档流，不响应父级 padding - 如果导航栏带阴影或 border，注意
box-sizing: border-box，否则padding-bottom会叠加在内容高度之外
真机调试时常见失效原因
写完代码却没生效？大概率卡在这几个点，而不是 CSS 本身有问题。
- 没在真机 Safari 中打开，而是在 Chrome 模拟器里测——
env()在非 iOS Safari 下基本无效，模拟器也不模拟安全区 - 页面被微信内置浏览器或 QQ 浏览器打开：它们不支持
env()，返回0，需额外 UA 判断 + JS 注入 fallback 高度 - CSS 文件未刷新或被缓存：iOS Safari 对 CSS 缓存极激进，改完务必硬刷新（长按刷新按钮选「重新加载」）
- 用了
postcss-env-fallback之类插件自动补env()回退——这类工具会把env(safe-area-inset-bottom)直接编译成固定值，失去动态性，应禁用
安全区不是“加个 padding 就完事”的视觉修饰，它是系统级的布局约束。一旦漏掉 viewport-fit=cover 或写错作用目标，整个适配链就断了，而且错误表现非常隐蔽：看起来正常，但在某台 iPhone 上突然被横条盖住图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
