iPhone 底部元素被 Home Indicator 遮挡是因为 iOS 默认限制视口在安全区内；需设置 viewport-fit=cover 启用 env(safe-area-inset-bottom)，并在底部容器上用 padding-bottom: env(safe-area-inset-bottom) 撑高，同时配合 fixed 定位三件套及 body 预留空间。
为什么 bottom: 0 在 iPhone 上会被 Home Indicator 遮住
不是 CSS 写错了，是 iOS 默认把视口限制在安全区内。bottom: 0 的 position: fixed 元素会紧贴“逻辑视口底边”，而这个底边实际落在 Home Indicator 下方，导致按钮不可点、图标被裁切。
必须加 viewport-fit=cover 才能让 env(safe-area-inset-bottom) 生效
env(safe-area-inset-bottom) 在没放开安全区时恒为 0，再怎么写 padding-bottom 都没用。必须确保 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 完整存在——缺了 viewport-fit=cover，或漏掉 width=device-width，该变量就失效。
微信 iOS 客户端（尤其 8.0.32 之前）可能忽略此设置，需 JS 检测 UA 并 fallback：padding-bottom: 34px（iPhone X~14 系列典型值）。
padding-bottom: env(safe-area-inset-bottom) 加在哪
加在底部栏容器自身上，不是 body，也不是父级 wrapper。
立即学习“前端免费学习笔记（深入）”；
- 错误：给
body加padding-bottom: env(safe-area-inset-bottom)—— 这会让整个页面下移，破坏布局 - 错误：
bottom: env(safe-area-inset-bottom)—— Safari 静默丢弃该声明，不报错也不生效 - 正确：
height: 56px; padding-bottom: env(safe-area-inset-bottom)，让内容区域“撑高”到安全区之上 - 低版本 Safari（15.4 之前）不支持
calc(8px + env(safe-area-inset-bottom))，得写两行：padding-bottom: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom))
fixed 底部栏还必须配齐三件套和防坑设置
只写 bottom: 0 是最常见失败原因。iOS Safari 和部分安卓 WebView 会在地址栏收放、键盘弹出时重算视口高度，导致跳动甚至消失。
- 定位三件套缺一不可：
position: fixed; bottom: 0; left: 0; right: 0 - 高度必须固定：
height: 56px，禁用100vh、100%或clamp() -
body必须加padding-bottom: calc(56px + env(safe-area-inset-bottom))，否则正文最后一段会被遮住 - 绝对不能把底部栏塞进带
transform的父容器里（如transform: scale(1)），否则fixed退化为相对定位 - 内部避免放
<input>或<textarea>，iOS 键盘弹起易引发整体偏移
viewport-fit=cover 开闸、env() 注入、padding-bottom 接收、body 预留空间、DOM 结构不被 transform 污染，缺任一环，底部操作栏就会在某台真机上突然“消失”。 
