怎么让 iPhone X 底部透明

在开发移动端网页或混合应用时，iPhone X 及后续全面屏设备的“刘海”和底部 Home Indicator（小横条）区域可能会影响页面布局。 为了让页面底部内容不被遮挡，并实现视觉上的“透明”效果，我们需要正确使用 CSS 的安全区域（Safe Area）特性。

1. 使用 viewport-fit=cover

首先，在 HTML 的 <head> 中设置 viewport meta 标签，启用对安全区域的支持： 

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

2. 利用 env() 设置安全区域内边距

使用 CSS 的 env(safe-area-inset-bottom) 变量，为底部预留空间或实现透明背景延伸： 

body {

  padding-bottom: env(safe-area-inset-bottom);

  /* 或者让背景色/图片延伸到底部 */

  background: #fff;

  min-height: 100vh;

}

3. 实现底部透明的完整示例

以下代码可让页面背景“穿透”到 Home Indicator 区域，实现视觉透明：

html, body {

  height: 100%;

}



body {

  margin: 0;

  background: linear-gradient(to bottom, #4facfe, #00f2fe);

  /* 延伸到安全区域 */

  padding: env(safe-area-inset-top) env(safe-area-inset-right)

           env(safe-area-inset-bottom) env(safe-area-inset-left);

}

4. 注意事项