viewport-fit 是 ios 11+ safari 控制网页是否延伸至刘海/圆角区域的关键参数，必须设为 cover 并配合 css env(safe-area-inset-top) 才能真正避开遮挡。
viewport-fit 是什么，为什么必须设
viewport-fit 是 iOS 11+ Safari 中控制网页是否延伸到刘海/圆角/传感器区域的关键参数。不设或设错，页面顶部会被系统黑边遮挡，或者内容被强行缩放、留白——尤其在全屏 Web App 或 PWA 场景下特别明显。
meta 标签里怎么写 viewport-fit
必须写在 <meta name="viewport"> 的 content 属性中，和其他参数用英文逗号分隔，不能单独存在：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover：允许内容延伸到安全区外（需配合 CSSenv()使用） -
viewport-fit=contain：默认行为，内容严格限制在安全区内，顶部常留黑边 - 只支持这两个值，
auto已废弃，viewport-fit=auto无效
不加 env() 变量，cover 就等于白设
viewport-fit=cover 只是“允许”延伸，真正把内容顶上去还得靠 CSS 里的 env() 环境变量，否则顶部导航栏仍会被刘海压住：
body {<br> padding-top: env(safe-area-inset-top);<br> margin-top: 0;<br>}
-
env(safe-area-inset-top)返回刘海高度（如 44px），iOS 专属，Android 忽略 - 不要用
constant()（已弃用），只用env() - 如果用了 fixed 定位的顶部栏，记得给
top: env(safe-area-inset-top)，而不是padding
兼容性和调试要点
这个组合在 iOS Safari 上生效，但对 Chrome on iOS、微信内置浏览器、旧版 iOS 影响有限：
- iOS 11–14：
env()值可能为 0，即使设了cover也不一定真延伸 - 微信 iOS 客户端：部分版本忽略
viewport-fit，需额外检测window.innerHeight是否异常偏小 - 调试时打开 Safari 开发者工具 → “开发者”菜单 → 选中真机 → “显示 Rulers”，能看到安全区边界线
- 别依赖
viewport-fit做布局核心逻辑，它只是辅助；关键留白仍要靠@supports (padding-top: env(safe-area-inset-top))条件包裹
真正起作用的是 viewport-fit=cover + env() + 实际 CSS 适配三者缺一不可，漏掉任意一个，刘海就还在吃你的 UI。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
