移动端 fixed 元素易遮挡内容，尤其 iOS Safari 因地址栏动态变化和安全区域未适配导致底部截断；应结合 env(safe-area-inset-*) 预留空间并用 @supports 降级兼容。
移动端固定定位元素（如 position: fixed 的导航栏、返回按钮、悬浮按钮）容易遮挡页面主体内容，尤其在 iOS Safari 中因地址栏/工具栏动态收放、刘海屏、安全区域（Safe Area）未适配，导致底部内容被截断或操作不可达。核心解决思路是：**为固定元素预留空间 + 利用 CSS 安全区域环境变量适配不同设备**。
用 env() 和 constant() 适配安全区域
iOS 11+ 和部分安卓浏览器支持 env(safe-area-inset-*) 环境变量（constant() 是旧版兼容写法），可获取屏幕四边的安全边距值：
-
env(safe-area-inset-top)：顶部安全距离（如刘海、状态栏） -
env(safe-area-inset-bottom)：底部安全距离（如 Home Indicator、虚拟导航键） -
env(safe-area-inset-left)和env(safe-area-inset-right)：左右侧（少见，主要针对横屏或特殊设备）
例如给底部固定按钮留出安全距离：
.fixed-bottom-btn {bottom: env(safe-area-inset-bottom);
bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 11.0–11.1 */
}
为固定顶部/底部栏主动预留内边距
仅靠 fixed 元素自身适配不够，页面主体内容需避开被遮挡区域。常见做法是在 <body> 或主容器上设置 padding：
立即学习“前端免费学习笔记（深入）”；
- 顶部固定栏：给
body加padding-top: env(safe-area-inset-top) - 底部固定栏（如 TabBar）：给主内容区加
padding-bottom: env(safe-area-inset-bottom) - 若同时有顶部和底部栏，两者 padding 都要设，避免内容被双重遮挡
注意：padding 不影响 fixed 元素定位，只撑开内容区域，确保滚动时内容不滑入遮挡区。
避免滥用 viewport-fit=cover
在 <meta name="viewport"> 中添加 viewport-fit=cover 可让网页延伸至屏幕边缘，但会失去系统默认的安全区域保护 —— 这是“需要适配”的前提，不是“自动适配”。必须配合 env() 手动处理，否则文字/按钮可能直接贴在刘海或 Home Indicator 上。
推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
检测并降级处理不支持环境变量的浏览器
老旧安卓或微信内置浏览器可能不识别 env()。可用 CSS @supports 检测并提供 fallback：
.main-content { padding-bottom: env(safe-area-inset-bottom); }
}
@supports not (padding-bottom: env(safe-area-inset-bottom)) {
.main-content { padding-bottom: 20px; /* 常见底部安全高度兜底 */ }
}
