必须配合 viewport-fit=cover 和 env(safe-area-inset-bottom)，否则 fixed 底部元素会被 iphone 底部小黑条遮盖；需用 max(16px, env(safe-area-inset-bottom)) 三层降级，并排查 transform 等干扰定位的 css。
直接用 position: fixed + bottom: 0 无法真正贴合 iPhone 底部安全区域，必须配合 env(safe-area-inset-bottom) 和正确的 viewport 配置，否则导航栏按钮会被 Home Indicator 遮住、点击失灵。
为什么 fixed 底部元素在 iPhone 上总被小黑条盖住
因为 position: fixed 默认对齐的是视口（viewport）物理底边，而 iPhone X 及后续机型的「安全区域」比视口高约 34px（底部 Home Indicator 区域）。系统故意不让内容延伸到那里——不是 bug，是设计约束。浏览器不会自动为你留空，bottom: 0 就是真·到底，哪怕底下是不可点的黑条。
必须加的 <meta> 标签和 CSS 写法
缺一不可，否则 env(safe-area-inset-bottom) 返回 0：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">——viewport-fit=cover必须和width=device-width同时存在，单独写无效 - 导航栏自身保持
position: fixed; bottom: 0; width: 100%; - 主内容容器（如
<main></main>或<div class="content">）加：<br><code>padding-bottom: 16px;padding-bottom: env(safe-area-inset-bottom);padding-bottom: max(16px, env(safe-area-inset-bottom)); - 不要用
margin-bottom：在 flex/grid 容器中容易被折叠；也不要设在上，会干扰scrollHeight和IntersectionObserver - 第一层 fallback：写死一个合理值，如
padding-bottom: 16px - 第二层：用
env(safe-area-inset-bottom)覆盖支持设备 - 第三层：用
max(16px, env(safe-area-inset-bottom))防止某些 iPad 返回0px导致留白消失 - 微信内或旧安卓 WebView 中，可加轻量 JS 判断：
if (/(iPhone|iPad)/i.test(navigator.userAgent) && window.visualViewport?.height ，再动态设置 <code>style.paddingBottom = '34px'
兼容旧版 Safari 和安卓 WebView 的降级策略
env() 在 Safari 15.4 之前不支持直接用于 padding-bottom 单独声明，且 @supports 检测在 iOS 11.2+ 不可靠。稳妥做法是：
最容易被忽略的一点：父容器如果设置了 transform、perspective 或 filter，会创建新的层叠上下文，导致 position: fixed 相对于该父容器定位而非视口——检查 DOM 结构里有没有意外的 CSS 干扰。
