iPhone X+ 上 bottom: 0 会遮挡内容，因其贴至视口底边而未避开底部安全区（含 Home Indicator）；需用 env(safe-area-inset-bottom) 配合 viewport-fit=cover 实现动态留白，并优先使用 margin-bottom 或 padding-bottom 于导航栏自身，避免影响 flex 布局。
bottom: 0 为什么在 iPhone X+ 上会遮挡内容？
因为 bottom: 0 会贴到视口最底部，而 iPhone X 及后续机型（如 iPhone 12–16）存在物理圆角和底部 Home Indicator 区域，系统默认的 viewport 高度包含这个“危险区”。浏览器渲染时若不主动避开，导航栏就会被截断或盖住指示器。
用 env(safe-area-inset-bottom) 动态留白
这是 iOS Safari 11.0+ 和 Chrome for iOS 支持的 CSS 环境变量，返回底部安全区高度（通常为 34px 或 21px，取决于设备与横竖屏）。关键不是“加 padding”，而是让导航栏自身「撑开」或「上移」出危险区：
- 给底部导航容器设置
padding-bottom: env(safe-area-inset-bottom)，适用于固定高度 + 内容居中的场景 - 更推荐用
margin-bottom: env(safe-area-inset-bottom)，避免影响内部 flex 布局或子元素高度计算 - 必须搭配
viewportmeta 的viewport-fit=cover才能启用该变量：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
flex 布局下 align-items: flex-end 会失效？
当父容器设为 display: flex; flex-direction: column; 并希望导航栏始终停在底部时，align-items: flex-end 不起作用——它控制的是交叉轴对齐，真正需要的是 margin-top: auto 推动子元素到底部。此时若再叠加 env(safe-area-inset-bottom)，应加在导航栏自身上，而非父容器：
.nav-bar {
margin-top: auto;
padding-bottom: env(safe-area-inset-bottom);
}
注意：不要对父容器设 padding-bottom，否则可能把整个 flex 主轴拉长，导致页面出现意外滚动条。
立即学习“前端免费学习笔记（深入）”；
安卓设备要不要加 fallback？
安卓原生浏览器和大部分 WebView（包括微信内置）不支持 env() 函数，直接忽略会导致底部紧贴屏幕边缘。稳妥做法是：
- 用
@supports (padding-bottom: env(safe-area-inset-bottom))包裹适配规则，避免干扰旧环境 - 同时提供基础 fallback：
padding-bottom: 16px（或根据设计稿最小安全值） - 真机测试时重点关注三星 Galaxy S 系列、华为 Mate/P 系列的刘海/挖孔屏，它们虽不响应
env()，但部分定制系统会注入--safe-area-inset-bottom自定义 CSS 变量，可额外监听
最易被忽略的一点：iOS 横屏时 env(safe-area-inset-bottom) 可能变为 0（Home Indicator 移至侧边），此时不应强制留白，而应依赖媒体查询动态调整——但多数项目选择忽略横屏底部适配，因导航栏本身常被隐藏或折叠。
