什么是 iPhone X 底部任务栏？
iPhone X 及后续全面屏机型在屏幕底部引入了一个名为“Home Indicator”（主屏幕指示器）的横条，用于替代物理 Home 键实现返回主屏幕等手势操作。在 Web 开发或 App 设计中，有时需要让该区域背景透明以获得更沉浸的视觉体验。
网页中如何实现底部任务栏透明？
通过设置合适的 viewport-fit 和 CSS 环境变量，可以让网页内容延伸至安全区域之外，并使底部任务栏呈现透明效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">配合 CSS 使用 env(safe-area-inset-bottom) 控制布局：
body {
padding-bottom: env(safe-area-inset-bottom);
}若希望任务栏下方背景透明（例如全屏图片或视频），可将页面背景设为透明，并确保内容不被遮挡。
注意事项
- 并非所有浏览器都支持
viewport-fit=cover，建议测试主流 iOS Safari 行为。 - 过度使用透明可能导致用户误触或界面混乱，请谨慎设计交互区域。
- iOS 系统本身不允许完全隐藏 Home Indicator，仅能通过 UI 配合实现“视觉透明”。