CSS如何适配iPhone刘海屏_env(safe-area-inset-top)用法

作者：袖梨 2026-07-17

env(safe-area-inset-top)提供动态安全区高度值（刘海设备竖屏约44px，横屏约24px，无刘海为0px），需手动应用于padding-top等属性，并配合height:100vh及@supports兜底才有效。

直接说结论：env(safe-area-inset-top)不是“自动适配”，而是给你一个动态数值（单位px），你得手动把它加进padding-top、margin-top或top里，否则页面照样被刘海遮住。

这个值在非刘海设备（如iPhone 8）上是0px，在iPhone X/XR/12/14/15等有刘海的设备上通常是44px（竖屏状态），横屏会变成24px（取决于系统版本和方向）。它由系统实时提供，无需JS读取。

常见错误现象：

只写了padding-top: env(safe-area-inset-top)，但父容器没设height: 100vh或min-height: 100vh，导致顶部留白不明显，误以为“生效了”
在body上直接写padding-top，结果整个页面下移，header被顶出视口上方
用env()但没加@supports兜底，老iOS（

iOS 11.0+才支持env()，且早期版本（11.0–11.1）只支持constant()（已废弃）。不加兼容判断，低版本会把env()当无效值，回退到初始值（比如0），造成顶部塌陷。

立即学习“前端免费学习笔记（深入）”；

正确写法是双保险：

header {  padding-top: constant(safe-area-inset-top); /* iOS < 11.2 */  padding-top: env(safe-area-inset-top);      /* iOS ≥ 11.2 */}

更稳妥的做法是用@supports包裹：

@supports (padding-top: env(safe-area-inset-top)) {  header {    padding-top: env(safe-area-inset-top);  }}

注意：constant()已被Safari完全弃用，iOS 15+不再识别，所以现在只保留env() + @supports即可，不用再写constant()。

不是所有顶部元素都要加。加错位置反而破坏布局：

适合加的地方：固定定位的header、全屏弹窗的titlebar、需要贴顶部但避开刘海的内容容器
不适合加的地方：普通文档流中的h1、轮播图内部标题、卡片内文字——它们本就不该紧贴屏幕顶边，加了反而留白过大
要小心的地方：如果用了position: fixed; top: 0的导航栏，只加padding-top不够，得同时加top: env(safe-area-inset-top)，否则内容会被刘海裁切

典型场景示例（固定头部）：

@supports (top: env(safe-area-inset-top)) {  .navbar-fixed {    top: env(safe-area-inset-top);    padding-top: env(safe-area-inset-top);  }}

排除代码写法问题后，大概率是以下三个原因：

viewport meta 缺失或错误：必须带viewport-fit=cover，否则系统不启用安全区计算。正确写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
父容器高度未撑开：比如html或body没设height: 100%，导致env()值虽存在，但视觉上无变化
CSS优先级被覆盖：比如某个组件CSS里写了padding-top: 0 !important，把env()值强行干掉了