iPhone X 以后的机型底部有一条黑色横条（Home Indicator），它会遮挡 H5 页面底部大约 34pt 的内容。如果你的页面有底部按钮、TabBar、浮动操作条，一定会被遮挡。

第一步：开启 viewport-fit=cover。

在 <meta name="viewport"> 里加上 viewport-fit=cover，否则整个页面会被限制在安全区内，底部留一条白色背景。

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

第二步：用 env() 补齐底部。

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容旧版 iOS */
  padding-bottom: constant(safe-area-inset-bottom);
}

注意顺序：constant() 在前（iOS 11.0-11.2），env() 在后（iOS 11.2+）。后写的会覆盖前者，两边都能兼容。

第三步：三种常见场景。

• 底部固定按钮：给按钮容器加 padding-bottom: env(safe-area-inset-bottom)，让按钮位置不变，但底部空出安全区。
• 底部 TabBar：同上。TabBar 高度 = 正常高度 + 安全区高度，在最后一项下加 padding。
• 全屏滚动内容：给页面容器加 padding-bottom: env(safe-area-inset-bottom)，避免最后一行文字被遮挡。

四个常见误区：

• 写死 34px：不同机型安全区高度不同（iPhone SE 是 0，iPhone 17 是 34），写死会出问题。
• 只在 iOS 上测：部分安卓机型（如小米 13）也有安全区，需要测安卓。
• 忘记 viewport-fit=cover：只加 env() 不加 viewport-fit，env() 会返回 0。
• 用 100vh 布局：100vh 包含安全区，内容会被遮挡，改用 100% 或 calc()。

在下方预览器输入网址，同时对比 iPhone SE（无安全区）和 iPhone 17（34pt 安全区），一眼看出底部是否有遮挡。