iPhone 底部横条（Home Indicator）怎么隐藏？

在全面屏 iPhone（如 iPhone X 及更新机型）上，屏幕底部会显示一条用于返回主屏幕或切换应用的“横条”，也称为 Home Indicator。很多用户或开发者希望在特定场景下隐藏它，以获得更沉浸的体验。本文将从多个角度为你详细解答。

一、普通用户能隐藏吗？

很遗憾，普通用户无法通过系统设置完全隐藏这条横条。这是 iOS 的核心交互设计，用于替代实体 Home 键，苹果出于安全和操作一致性的考虑，并未提供关闭选项。

二、网页开发者如何隐藏？

如果你是网页开发者，可以通过以下方式让 Safari 在 iPhone 上进入“伪全屏”模式，从而自动隐藏 Home Indicator：

1. 添加 viewport-fit=cover 到 meta 标签：

   这允许网页内容延伸到屏幕安全区域之外（包括底部横条区域）。

   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
2. 使用 CSS 环境变量适配安全区域：

   避免重要内容被横条遮挡，同时可配合全屏逻辑。

   body {
     padding-bottom: env(safe-area-inset-bottom);
   }

3. 引导用户“添加到主屏幕”并以 PWA 方式运行：

   当网页以“独立模式”（standalone）启动时，Safari UI（包括地址栏和底部横条）会自动隐藏，提供接近原生 App 的体验。

   <meta name="apple-mobile-web-app-capable" content="yes">

三、App 开发者如何处理？

如果你开发的是 iOS 原生 App 或使用 React Native、Flutter 等框架：

• 系统会自动在全屏视频、游戏等场景中隐藏 Home Indicator。
• 可通过代码主动控制：在 UIViewController 中重写 prefersHomeIndicatorAutoHidden 方法并返回 true。

四、常见误区

• ❌ “越狱后可以彻底关闭横条” —— 即使越狱，也需依赖第三方插件，且存在系统不稳定风险。
• ❌ “开启辅助触控（小白点）就能隐藏横条” —— 两者功能独立，开启小白点不会影响横条显示。

总结

iPhone 底部横条是 iOS 交互的重要组成部分，普通用户无法关闭，但开发者可通过技术手段在特定场景下实现自动隐藏。合理利用全屏模式和 PWA 技术，能显著提升用户体验。