如何去掉 iPhone 最下面的半透明框（Home Indicator）

在使用 iPhone X 及更新机型时，屏幕底部会出现一个半透明的横条（称为 Home Indicator），用于替代实体 Home 键进行返回主屏幕等操作。但在某些全屏应用或网页场景下，用户希望隐藏这个指示条以获得更好的沉浸式体验。

一、在 Web 网页中隐藏 Home Indicator

目前，Safari 浏览器和大多数移动端浏览器**不支持通过 HTML/CSS/JS 完全隐藏 Home Indicator**。这是出于系统交互安全考虑，苹果不允许网页随意屏蔽该控件。

但你可以通过以下方式优化显示效果：

• 使用 viewport-fit=cover 设置视口适配：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

• 为页面底部添加安全区域填充（Safe Area），避免内容被遮挡：

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

二、在 iOS App 中隐藏 Home Indicator

如果你是 iOS 开发者，可以在原生 App 中通过代码控制是否隐藏 Home Indicator：

• Swift 示例：

  override var prefersHomeIndicatorAutoHidden: Bool {
      return true
  }

• 设置后，用户轻扫屏幕底部仍可临时唤出 Home Indicator。

三、注意事项

苹果官方建议：除非你的 App 是游戏、视频播放器等需要高度沉浸的场景，否则不应隐藏 Home Indicator，以免影响用户正常操作。