viewport-fit=cover 是安全区适配的硬性开关，必须显式声明且与 width=device-width、initial-scale=1.0 共存；缺失则 env() 和 constant() 均返回 0px，导致所有 CSS 安全区适配失效。
viewport-fit=cover 不是“可选优化”，而是安全区适配的硬性开关；不加它，env(safe-area-inset-bottom) 等变量永远是 0px，所有后续 CSS 适配都失效。
viewport-fit=cover 必须显式声明且不可被覆盖
很多 H5 页面在 iPhone 上底部按钮被“小黑条”遮住，或顶部导航被刘海吞掉，根本原因不是 CSS 写错了，而是 <meta name="viewport"> 标签里压根没写 viewport-fit=cover，或者被其他属性干扰了。
-
viewport-fit=cover必须和width=device-width、initial-scale=1.0同时存在，缺一不可 - 避免混用已废弃的
target-densitydpi，它会直接让浏览器忽略viewport-fit - 如果项目同时控制缩放（如
user-scalable=no），必须保留maximum-scale=1.0，否则某些 WebView 会误判为允许缩放而降级处理cover - 微信小程序内嵌 H5 中，
viewport-fit=cover在 8.0.33+ 版本才稳定生效；7.x 早期版本会静默回退到auto，支付宝 WebView 则长期不识别该值
env() 和 constant() 必须双写且顺序固定
只靠 env() 或只靠 constant() 都会漏掉部分 iOS 版本的支持。iOS 11.0–11.1 仅识别 constant()，11.2+ 开始弃用 constant() 而只认 env()，所以必须共存，并严格按 constant() 在前、env() 在后的顺序书写。
- 错误写法：
padding-bottom: env(safe-area-inset-bottom)→ iOS 11.0–11.1 不生效 - 错误写法：
padding-bottom: constant(safe-area-inset-bottom)→ iOS 11.2+ 及现代 Chrome/Safari 直接忽略 - 正确写法：
padding-bottom: constant(safe-area-inset-bottom, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) - 不能写成单条声明如
padding-bottom: constant(...) env(...)，CSS 不支持函数叠加，必须两条独立声明
必须用 padding 修正，不能用 margin
安全区留白的本质是“为内容预留可显示空间”，margin 会让外边距脱离文档流，无法阻止父容器内容溢出到非安全区；只有 padding 能真正撑开容器内部可用区域。
立即学习“前端免费学习笔记（深入）”；
- 顶部适配：对
<body>或根容器设padding-top: constant(safe-area-inset-top, 0px); padding-top: env(safe-area-inset-top, 0px) - 底部适配：对固定定位的 tabbar 或操作栏设
padding-bottom，而非给其父容器设margin-bottom - 避免在
calc()中混用rpx、rem等相对单位，env()返回的是绝对像素值，混合单位会导致计算异常或失效 - 安卓部分旧 WebView（如 Android 4.4）完全不支持
env()，建议用@supports (padding-top: env(safe-area-inset-top))做渐进增强，兜底用媒体查询或 UA 判断
真机调试时必须验证 viewport-fit 是否真正生效
光看代码写了没用，得确认浏览器实际解析结果。Safari 开发者工具里检查 document.documentElement.style 并不显示 viewport-fit，但你可以通过 JS 打印 getComputedStyle(document.documentElement).getPropertyValue('padding-top') 是否返回非零值来间接验证；更直接的方式是打开 Safari 的「开发 → [设备名] → 勾选 “Show Viewport Size”」，观察视口是否已扩展至物理屏幕边缘。
- 若
env(safe-area-inset-bottom)计算结果始终为0px，第一反应不是改 CSS，而是回头检查<meta>标签是否被框架自动重写、是否有多余空格导致属性解析失败 - 部分构建工具（如 Vue CLI 的 html-webpack-plugin）会自动注入 viewport，可能覆盖你手写的配置，需检查最终 HTML 源码中是否真实存在
viewport-fit=cover - 不要依赖模拟器——iOS 模拟器默认不启用安全区变量，必须用真机调试；Android 挖孔屏也需在开启“强制挖孔显示”的开发者选项下测试
最常被忽略的一点：viewport-fit=cover 是“全屏渲染”的开关，不是“智能避让”的开关。它开启后，页面必然铺满物理屏幕，遮挡风险由你用 padding 主动承担——没有中间态，也没有浏览器自动帮你躲开刘海。
