刘海屏设备下使用vh单位布局时，如何避免内容被刘海遮挡？

Tr° 梓涵提问于 2026-01-31 12:34:27 阅读 71

移动

我在开发一个全屏显示的页面时遇到了问题，用100vh设置高度在普通手机上没问题，但在iPhone 14 Pro的刘海屏上底部内容被刘海区域遮挡了一部分，看起来就像这样：



  标题栏
  内容区域

我尝试过用padding-bottom调整，也查了apple的viewport-fit=cover参数，但修改后页面边缘会出现横向滚动条。有没有什么方法能准确计算刘海屏的可用高度？或者需要配合JavaScript检测刘海区域的尺寸？

我来解答赞 7 收藏

反馈

1 条解答

爱敏 Lv1

用 viewport-fit=cover 加 env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 就行。

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

然后样式：

body {

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

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

}

横向滚动条是其他地方出了问题，检查下宽高设置。

2026-02-01 10:02