刘海屏下页面内容被遮挡怎么解决？

慕容梦幻提问于 2026-03-02 21:35:18 阅读 4

移动

我在做移动端页面时，发现iPhone的刘海屏会把顶部导航栏的内容挡住，试过加padding-top: env(safe-area-inset-top)但好像没生效，是不是还要配合其他设置？

我的CSS是这样写的：

.header {
  padding-top: env(safe-area-inset-top);
  background: #fff;
}

H5开发移动适配

我来解答赞 3 收藏

反馈

1 条解答

IT人利娇 Lv1

你这代码本身没问题，但 env(safe-area-inset-top) 要生效，前提是页面得先"允许"延伸到安全区域外面。

问题出在你的 viewport meta 标签上，默认是 viewport-fit=auto，内容会自动缩在安全区里，safe-area-inset 这些值就都是 0 了。

改一下 meta 标签就行：

加上 viewport-fit=cover 后，你的 CSS 才会真正生效。

如果你的 header 是 fixed 定位的，记得把定位基准也考虑进去，完整的写法大概这样：

.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

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

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

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

  background: #fff;

  z-index: 100;

}



/* 底部如果有固定栏，记得加 bottom */

.footer {

  position: fixed;

  bottom: 0;

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

}

还有个常见的坑，本地开发的时候用 Chrome 模拟器测不出来这效果，得用真机或者 Xcode 的模拟器，Safari 开发者工具里能看到这些 env 值到底是多少。

2026-03-02 22:01