viewport-fit=cover必须与width=device-width等参数共存于同一meta标签的content属性中，单独写无效；env()和constant()需双写且constant()在前；须用@supports包裹并以padding而非margin实现安全区避让。
viewport-fit=cover 必须写在 content 属性同一行里
单独加一个 viewport-fit=cover meta 标签无效，浏览器会直接忽略。它必须和 width=device-width、initial-scale=1.0 等参数共存在同一个 <meta name="viewport"> 的 content 属性中。
常见错误写法：<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="viewport" content="viewport-fit=cover">
正确写法只有一条：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
构建工具（如 Vite、Webpack）注入 meta 时，要确认最终生成的 HTML 源码里确实是这一行；某些模板引擎（如 EJS、Nunjucks）会过滤掉不认识的属性名，导致 viewport-fit 被静默丢弃。
env() 和 constant() 必须双写且顺序不能错
env(safe-area-inset-top) 在 iOS 11.2+ 和现代 Chrome 中生效，但 iOS 11.0–11.1 只认 constant(safe-area-inset-top)。两者不共存，老设备上就完全没适配效果。
必须按这个顺序写两遍，不能合并：
padding-top: constant(safe-area-inset-top, 20px); padding-top: env(safe-area-inset-top, 20px);
要点：
-
constant()必须在前，env()在后；反过来或只写其一，部分设备返回 0px 或整条规则被跳过 - fallback 值别用
0px，建议设成20px或预估状态栏高度，否则无支持时 header 会塌陷 - 不能写成
padding-top: constant(...) env(...)—— CSS 语法非法，整条声明解析失败
@supports 包裹是渐进增强的关键
不是所有安卓 WebView 都支持 viewport-fit=cover，直接全局应用会导致部分设备布局错乱。要用 @supports 做能力检测：
@supports (padding-top: env(safe-area-inset-top)) {
body {
padding-top: constant(safe-area-inset-top, 20px);
padding-top: env(safe-area-inset-top, 20px);
padding-bottom: constant(safe-area-inset-bottom, 34px);
padding-bottom: env(safe-area-inset-bottom, 34px);
}
}
注意：@supports 条件只能写成 (padding-top: env(...))，不能写 (env(...))（语法错误），也不能用 or 连接多个函数。
这个包裹能确保：不支持的设备（如旧版微信、支付宝 WebView）完全跳过这些样式，避免意外覆盖原有布局。
fixed 元素避让必须用 padding，不是 margin
给底部 tabbar 加 margin-bottom: env(safe-area-inset-bottom) 是无效的 —— margin 不撑开父容器，内容仍可能溢出到非安全区。
正确做法是对元素自身设 padding-bottom，或者对其直接父容器设 padding-bottom：
.tabbar {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: constant(safe-area-inset-bottom, 34px);
padding-bottom: env(safe-area-inset-bottom, 34px);
}
顶部同理：对 或根容器设 padding-top，而不是给 header 设 top: env(...) —— 后者在灵动岛展开/收起时容易引发布局抖动。
另外，别把 env() 放进 calc() 里算全高，比如 height: calc(100vh - env(safe-area-inset-top))，iOS 上滚动时可能跳变；改用 min-height: 100vh + padding-top 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
