刘海屏设备下全屏背景总被状态栏遮挡怎么办？

西门子诺提问于 2026-02-09 15:33:25 阅读 19

移动

最近在做全屏背景图的时候发现，iPhone 14 Pro的刘海区域总会有一块地方显示不出来，用safe-area-inset设置的padding反而把内容推下去了，但背景图还是被刘海遮住了一角。

试过这样写CSS：


body {
  margin: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  padding: 0;
  min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

结果底部导航栏区域出现了滚动条，而且背景图的fixed定位元素还是贴到刘海下面去了。查了文档说是需要同时处理padding和定位，但具体怎么组合才能兼容Android和iOS的刘海屏呢？

我来解答赞 9 收藏

反馈

1 条解答

慕容永伟 Lv1

你这个问题我也踩过坑，根本原因是只用了 env(safe-area-inset-top) 控制 margin 或 padding，但没处理 fixed 元素的定位逻辑。背景图如果用的是 position: fixed; top: 0;，那它一定会从屏幕最顶上开始渲染，刘海区域自然就被切了。

正确做法是让全屏容器本身避开安全区影响，同时保证内容和背景都能完整覆盖可视窗口。

先改 HTML 结构，加个根层容器：

<div class="full-screen-layout">

  <div class="bg-image"></div>

  <div class="content">你的内容</div>

</div>

然后这样写 CSS：

html, body {

  height: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



.full-screen-layout {

  position: relative;

  width: 100%;

  height: 100vh;

  /* 让容器本身不受安全区压缩 */

  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

}



.bg-image {

  position: absolute;

  top: calc(0px - env(safe-area-inset-top));

  left: calc(0px - env(safe-area-inset-left));

  width: 100vw;

  height: 100vh;

  background: url('your-bg.jpg') center/cover no-repeat;

  z-index: -1;

}



.content {

  /* 内容区域自然留白，由父容器 padding 处理 */

  flex: 1;

}

关键点在于 .bg-image 的 top 和 left 要用负值把安全区“拉回来”，这样背景就能突破 safe area 向外扩展。而 .full-screen-layout 的 padding 确保内容不会被遮挡，这样布局和视觉就分开了，互不干扰。

这个方案在 iPhone 各型号、Android 刘海机上都测过，兼容性没问题。而且不用 JS，纯 CSS 解决，这样更清晰。

2026-02-09 15:36