移动端H5头部刘海屏区域如何用CSS进行安全边界适配？-css教程-PHP中文网

必须加 viewport-fit=cover，否则 env(safe-area-inset-top) 在iOS真机上恒为0；该变量仅在 viewport-fit=cover 模式下启用，需显式声明于meta标签中，并配合@supports检测和max()兜底使用。

移动端h5头部刘海屏区域如何用css进行安全边界适配？

必须加 viewport-fit=cover，否则 env(safe-area-inset-top) 永远是 0。

为什么 `env(safe-area-inset-top)` 不生效

真机上值为 0，不是代码写错了，而是浏览器根本没启用安全区域计算。iOS 的 env() 变量只在 viewport-fit=cover 模式下注入，其他取值（如 auto 或不设）会强制页面退回到“传统安全框”，此时系统不暴露任何 inset 值。

常见错误：<meta name="viewport" content="width=device-width, initial-scale=1"> —— 缺少 viewport-fit=cover，整个适配链就断了。

必须显式声明：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
不能靠 UA 判断是否加——微信内置浏览器、PWA、WKWebView 在 iOS 上行为一致，都依赖这个 meta
Android Chrome 和大部分安卓 WebView 完全忽略 viewport-fit，但加了也无害；鸿蒙 ArkWeb 从 4.0+ 开始支持

`padding-top` 还是 `margin-top`？用在哪一层

别直接套在上。全局 padding 会导致非刘海设备（如 iPhone 8）顶部多出空白，且干扰 flex/grid 布局流。

正确做法：只作用于真正需要避让的容器，比如导航栏、标题栏或固定定位的 header。

如果 header 是 position: fixed; top: 0，用 top: env(safe-area-inset-top) 替代 top: 0
如果 header 是普通流式元素，用 padding-top: env(safe-area-inset-top)
必须加兜底：padding-top: max(0px, env(safe-area-inset-top)) —— max() 能让不支持 env() 的浏览器解析为 0px，而 padding-top: env(safe-area-inset-top, 20px) 是非法语法，整条声明会被丢弃

@supports 检测比 JS 更可靠

不要用 navigator.userAgent 判断 iOS 版本，也不要用 webkit 前缀检测。iOS 15+ 已移除部分前缀依赖，微信、飞书、钉钉等壳内 WebView 行为与 Safari 不完全一致。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

唯一可信赖的方式是 CSS 特性检测：

@supports (padding-top: env(safe-area-inset-top)) {
  .header-fixed {
    top: env(safe-area-inset-top);
    top: max(0px, env(safe-area-inset-top));
  }
}

注意：@supports 必须包裹所有含 env() 的声明，否则老浏览器遇到不认识的函数会跳过整块规则。

不支持 env() 的 Android、旧版 iOS 会直接忽略该规则块，走默认样式
不能把 @supports 和媒体查询混用——@supports (padding-top: env(...)) and (max-width: 768px) 在部分安卓 WebView 中解析失败
兜底值必须写在 env() 后面，顺序不能反，否则无效