在开发移动端网页或混合应用时，iPhone X 及后续全面屏设备的“刘海”和底部 Home Indicator（小横条）区域可能会影响页面布局。 为了让页面底部内容不被遮挡，并实现视觉上的“透明”效果，我们需要正确使用 CSS 的安全区域（Safe Area）特性。
首先，在 HTML 的 <head> 中设置 viewport meta 标签，启用对安全区域的支持：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
使用 CSS 的 env(safe-area-inset-bottom) 变量，为底部预留空间或实现透明背景延伸：
body {
padding-bottom: env(safe-area-inset-bottom);
/* 或者让背景色/图片延伸到底部 */
background: #fff;
min-height: 100vh;
}
以下代码可让页面背景“穿透”到 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);
}
viewport-fit=cover 是关键，否则 env() 不生效。