在使用 iPhone 浏览网页时，有时会在页面底部看到一条灰色或白色的横条（通常为 Safari 浏览器的地址栏或工具栏区域）。这并非网页内容本身，而是 iOS 系统 UI 的一部分。但如果你希望打造“全屏沉浸式”体验，可以通过以下方法尽量隐藏或规避它。
原因分析
这条横条通常出现在以下情况：
- 网页未启用“standalone”模式（即非 PWA 应用）
- 页面高度未覆盖整个视口（viewport）
- iOS Safari 默认保留底部导航/地址栏空间
解决方法
1. 使用 viewport-fit=cover
在 HTML 的 <head> 中添加以下 meta 标签，让网页内容延伸到安全区域之外：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">2. 设置 CSS 安全区域填充（Safe Area）
使用 CSS 的 env() 函数适配 iPhone 底部安全区域：
body {
padding-bottom: env(safe-area-inset-bottom);
}若你想“覆盖”横条区域，可将背景色延伸到底部：
html, body {
height: 100%;
background: #fff;
}
body::after {
content: "";
display: block;
height: env(safe-area-inset-bottom);
background: #fff;
}3. 启用 PWA 全屏模式（推荐）
通过添加 Web App Manifest 和相关 meta 标签，使网页在“添加到主屏幕”后以全屏模式运行：
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">配合 manifest.json 文件，用户从主屏幕打开时将无 Safari UI 横条。
4. 避免内容紧贴底部
确保重要内容不位于页面最底部，防止被横条遮挡。可通过增加底部 padding 或使用 min-height: 100vh + 安全区域补偿来布局。
注意事项
完全“去掉”系统横条在普通网页中是不可能的（出于安全考虑，iOS 不允许网页隐藏浏览器 UI）。但通过上述方法，可以实现视觉上的沉浸效果或在 PWA 模式下真正全屏。