在移动端h5中适配安全区域，核心做法是结合css的`env()`函数与媒体查询。通过设置根元素的`padding`或`margin`来预留空间，可以确保内容不被刘海、圆角或底部横条遮挡。
如何定义全局的安全区域变量？
直接回答：需要在`:root`选择器中为`safe-area-inset-*`属性设置默认值，并针对支持`env()`的浏览器提供具体取值。
/* 基础重置与安全区域定义 */
:root {
/* 默认值为0，兼容不支持env()的旧设备 */
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
}
/* 针对iOS Safari等现代浏览器的增强适配 */
@media (supports (padding: env(safe-area-inset-top))) {
:root {
--safe-top: env(safe-area-inset-top);
--safe-right: env(safe-area-inset-right);
--safe-bottom: env(safe-area-inset-bottom);
--safe-left: env(safe-area-inset-left);
}
}上述代码首先定义了四个CSS自定义属性，分别对应上、右、下、左四个方向的安全距离。`env()`函数会读取系统提供的安全区域数值，如果浏览器不支持该函数，则回退到逗号后的`0px`。这样，后续所有使用这些变量的组件都能自动获得正确的间距。
立即学习“前端免费学习笔记（深入）”；
如何在页面布局中应用这些变量？
直接回答：将变量应用于容器的`padding`或`margin`，特别是头部导航栏和底部操作栏，以防止内容被UI元素覆盖。
/* 示例：头部导航栏适配 */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: calc(44px + var(--safe-top));
padding-top: var(--safe-top);
background-color: #fff;
z-index: 100;
}
/* 示例：底部Tab栏适配 */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(50px + var(--safe-bottom));
padding-bottom: var(--safe-bottom);
background-color: #f0f0f0;
z-index: 100;
}在头部导航栏中，我们使用`calc()`函数将固定高度（如44px）加上顶部安全距离，并通过`padding-top`将内容向下推移。同样，底部Tab栏也采用类似逻辑，确保按钮不会被iPhone X及以后机型的Home Indicator遮挡。这种写法保证了在不同机型上，关键交互区域始终处于可视且易触达的位置。
当背景图铺满全屏时如何处理边缘留白？
直接回答：使用`background-attachment: fixed`配合`min-height: 100vh`，并利用`padding`撑开安全区域，避免背景图被裁剪或出现白边。
body {
margin: 0;
padding-top: var(--safe-top);
padding-bottom: var(--safe-bottom);
min-height: 100vh;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}在全屏背景场景下，直接将`background`设置在`body`上可能导致背景图无法延伸到安全区域之外。通过在`body`上添加`padding`，我们可以让背景图自然填充整个视口，包括安全区域。同时，`background-attachment: fixed`确保背景图在滚动时保持静止，提升视觉体验。注意，某些Android WebView可能对`fixed`支持不佳，此时可考虑使用`position: absolute`替代。
