env(safe-area-inset-top)提供动态安全区高度值（刘海设备竖屏约44px，横屏约24px，无刘海为0px），需手动应用于padding-top等属性，并配合height:100vh及@supports兜底才有效。
iPhone刘海屏顶部安全区怎么用env(safe-area-inset-top)
直接说结论：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（
env(safe-area-inset-top)必须配合@supports使用
iOS 11.0+才支持env()，且早期版本（11.0–11.1）只支持constant()（已废弃）。不加兼容判断，低版本会把env()当无效值，回退到初始值（比如0），造成顶部塌陷。
正确写法是双保险：
header {
padding-top: constant(safe-area-inset-top); /* iOS <p>更稳妥的做法是用<code>@supports</code>包裹：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><pre class="brush:php;toolbar:false;">@supports (padding-top: env(safe-area-inset-top)) {
header {
padding-top: env(safe-area-inset-top);
}
}
注意：constant()已被Safari完全弃用，iOS 15+不再识别，所以现在只保留env() + @supports即可，不用再写constant()。
哪些地方该加，哪些不该硬加env(safe-area-inset-top)
不是所有顶部元素都要加。加错位置反而破坏布局：
-
适合加的地方：固定定位的
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);
}
}
为什么env(safe-area-inset-top)有时不生效
排除代码写法问题后，大概率是以下三个原因：
-
viewportmeta 缺失或错误：必须带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()值强行干掉了
调试建议：在Safari开发者工具里选中元素，看Computed面板中padding-top是否显示为实际像素值（如44px），而不是env(...)原始字符串——后者说明未解析成功。
真正容易被忽略的是viewport-fit=cover这个开关。没它，env()就是个摆设，连iOS真机上都看不到效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
