env(safe-area-inset-top)在不加viewport-fit=cover时恒为0px，因ios safari仅在width=device-width、initial-scale=1.0、viewport-fit=cover三者同时满足时才注入该变量；缺一即失效，非兼容性问题而是未激活。
不加 viewport-fit=cover, env(safe-area-inset-top) 永远是0px——不是“没生效”,是系统压根儿没注入任何值。别在没配 meta 的前提下反复调样式,那是死循环。
为什么写了env()却没反应？
最常见原因是 <meta name="viewport">中没有<code>viewport-fit=cover,或者被 JS 动态覆盖了。iOS Safari 只有在同时满足以下三个条件时才注入安全区域变量: width=device-width、initial-scale=1.0、viewport-fit=cover。缺一个,safe-area-inset-* 全为0px。微信 X5 内核、旧版安卓 WebView 也不支持该属性,不是兼容性问题,是压根儿不识别。真机调试时,直接运行getComputedStyle(document.body).getPropertyValue('padding-top'),看返回的是否是带单位的非零值,不是空字符串或 fallback 值。
- 不要信浏览器模拟器,必须用 iPhone 真机 + Safari 开发者工具验证
- 检查页面最终渲染出的标签,确认它确实包含
viewport-fit=cover,而不是被 PWA 注册、第三方 SDK 或 JS 动态重写掉了
@supports (padding-top: env(safe-area-inset-top))怎么写才对？
这个检测不是查函数是否存在,而是测试“把env()作为某个 CSS 属性值”是否能被当前浏览器当作合法声明来解析。语法错一个字符,整段CSS块都会被跳过,你写的规则等于不存在。正确的写法必须把env()放在属性声明的位置上,不能单独拎出来。如果写成@supports (env(safe-area-inset-top)),语法非法,整个@supports块被忽略。同理,
@supports (safe-area-inset-top: 44px)也是无效的,这不是CSS属性名。此外,@supports 对非布局类属性(如background)支持不稳定,建议只用于padding/margin/top/bottom等位置相关属性。
<pre class="brush:php;toolbar:false;">@supports (padding-top: env(safe-area-inset-top)) {
.header { padding-top: env(safe-area-inset-top); }
}
- fallback 建议设为20px或44px,直屏设备也适用,不会导致顶部突兀留白
- 不要写
--safe-top: env(safe-area-inset-top)然后到处var(--safe-top),不支持的环境里变量值为unset,后续所有calc()会静默失效。更稳的做法是用<code>--safe-top: max(0px, env(safe-area-inset-top, 0px))做兜底
固定定位元素被刘海/小黑条遮挡怎么办？
position: fixed; top: 0; padding-top: env(safe-area-inset-top)对fixed元素完全无效——padding-top作用于内容区,而fixed元素的定位起点就是视口左上角,动的是内容,不是定位点。真正要改的是top偏移量。而且仅写
top: env(safe-area-inset-top)会导致iOS 11.0–11.2版本失效,因为那会儿还用constant()。正确做法是利用CSS层叠顺序叠加写法,让老版本也能降级: <code>top: 0; top: constant(safe-area-inset-top); top: env(safe-area-inset-top);。注意顺序不能反:constant()必须写在env()前面,否则旧版Safari无法fallback。同样适用于底部TabBar: <code>bottom: 0; bottom: calc(0px + constant(safe-area-inset-bottom)); bottom: calc(0px + env(safe-area-inset-bottom));（注意这里用了calc(),因为某些旧版对直接写env()作数值运算支持不一致)
<p>注意:不要在Vue/React 的内联样式里写<code>style={{ top: 'env(safe-area-inset-top)'>——JS 不会解析CSS函数,只会原样透传字符串,结果就是top: “env(...)",浏览器直接当无效值处理。</code></p>
<h3>Android挖孔屏要不要用env()适配？\n</h3>
<p>基本不用。Chrome 90+及主流安卓 WebView 均不支持<code>viewport-fit=cover,因此env()根本不会被注入。Android 安卓端适配主要靠display-cutout和UA判断,比如通过<code>@supports (display: block) and (not (margin-top: env(safe-area-inset-top))) { … }配合UA判断机型,或直接用display-cutout:round等媒体查询。如果你发现某台安卓机<code>env()</code></code></code></p></code></code>有值,大概率是定制系统或极个别WebView版本的偶然行为,不可作为通用方案依赖。实际项目中,针对安卓,更靠谱的做法是预留20–44px顶部/底部空间,或使用JavaScript读取screen.availHeight与window.innerHeight差值做动态补偿。最容易被忽略的一点:横屏状态下,safe-area-inset-left和safe-area-inset-right也会有值,刘海跑到侧面去了。如果你的页面支持横屏,记得把左右方向的安全距离也考虑进去,否则侧边按钮可能被挖孔挡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
