viewport-fit=cover是ios safari（11.2+）中允许网页内容渲染到安全区外的声明，需配合env()函数使用，且必须与width=device-width、initial-scale=1.0共存才生效；安卓端完全忽略该属性。
viewport-fit=cover 是什么，什么时候需要加
它不是让页面“填满”刘海屏的万能开关，而是告诉 Safari（仅 iOS 11.2+）允许网页内容渲染到屏幕安全区域之外——比如状态栏下方、Home Indicator 上方。只有当你的页面明确做了 env() 或 constant() 安全区适配（比如用 padding-bottom: env(safe-area-inset-bottom)），且希望底部按钮贴着 Home Indicator 显示时，才需要加 viewport-fit=cover。不加的话，Safari 默认会把整个视口向下压缩，留出安全边距，导致页面被“上推”。
怎么写才生效：meta 标签必须带 initial-scale=1
只写 <meta name="viewport" content="viewport-fit=cover"> 是无效的。iOS 要求必须同时指定缩放控制，否则忽略 viewport-fit。常见错误写法是漏掉 initial-scale=1 或用了 user-scalable=no 却没配齐其他参数。
正确写法示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
如果项目要求禁用缩放，必须显式补全所有基础项：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-
width=device-width和initial-scale=1.0缺一不可 - 只在 iOS Safari 生效；Chrome / Android WebView 完全忽略该属性
- 加了之后，
document.documentElement.clientHeight仍返回安全区域内高度，不是物理屏幕高度
加了 cover 却没效果？检查 CSS 是否用了 env() 函数
viewport-fit=cover 本身不改变布局，它只是“开闸”，真正决定内容是否延伸到刘海/圆角区域的是 CSS。如果你没在样式里调用 env(safe-area-inset-top)、env(safe-area-inset-bottom) 等函数，页面看起来和不加 cover 完全一样。
典型适配场景：
- 固定底部导航栏：用
padding-bottom: env(safe-area-inset-bottom)防止被 Home Indicator 遮挡 - 全屏视频或海报图：用
margin-bottom: calc(-1 * env(safe-area-inset-bottom))向下溢出 - 需要“穿透”状态栏的顶部 banner：配合
padding-top: env(safe-area-inset-top)+position: fixed
注意：env() 在不支持的浏览器中会被忽略，务必提供 fallback，比如：
padding-bottom: 16px;<br>padding-bottom: env(safe-area-inset-bottom);
安卓刘海屏和华为/小米机型怎么办
viewport-fit=cover 对安卓完全无效。各厂商对刘海屏的处理策略不统一：华为用 meta name="viewport" 扩展（如 fit-screen），小米部分机型响应 handheldfriendly=true，但都无标准、无兼容性保障。更可靠的做法是依赖 CSS 媒体查询检测，例如：
@supports (padding-top: env(safe-area-inset-top)) {<br> /* iOS 安全区适配 */<br>}
或者用 JavaScript 检测 window.visualViewport 高度变化、结合 UA 判断机型，再动态加 class 控制 padding。别指望一个 meta 属性搞定跨平台刘海适配。
真正容易被忽略的一点：即使在 iOS 上，env() 的值在横屏切换、键盘弹出时可能异步更新，直接读取 getComputedStyle 可能拿不到最新值，需要用 visualViewport resize 事件监听或 matchMedia('(orientation: landscape)') 做响应式重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
