viewport-fit=cover必须与width=device-width和initial-scale=1.0同时存在，三者缺一不可；单独使用或缺失任一参数均导致env()返回0px，安全区适配失效。
加 viewport-fit=cover 是 iOS 刘海屏（iPhone X 及后续）实现视觉全屏的必要操作，不加就会被系统强制缩进，顶部留白、底部按钮被 Home Indicator 遮住。
viewport-fit=cover 必须和哪些 meta 参数共存？
单独写 viewport-fit=cover 不生效。它必须与 width=device-width 和 initial-scale=1.0 同时存在，三者缺一不可：
-
width=device-width：让视口宽度匹配设备物理宽度 -
initial-scale=1.0：避免双击缩放异常，也防止 Safari 自动缩放导致布局错乱 -
viewport-fit=cover：开启渲染到安全区外的能力（仅 iOS Safari / WebKit 内核生效）
错误写法示例：<meta name="viewport" content="viewport-fit=cover"> —— 缺基础参数，完全无效；<meta name="viewport" content="width=device-width, viewport-fit=cover"> —— 没 initial-scale=1.0，横屏或双击后可能跳变。
为什么 env(safe-area-inset-top) 返回 0？
这个 CSS 环境变量只有在 viewport-fit=cover 生效的前提下才会返回非零值（如 iPhone X 是 44px）。常见失效原因：
- meta 中漏了
viewport-fit=cover，或拼写错误（比如写成viewport-fit: cover，冒号是 CSS 语法，meta 里必须用等号） - CSS 中直接在
style=""行内属性里用了env()—— 不支持，只能写在<style></style>块或外部 CSS 文件中 - 没同时声明
constant()回退（iOS 11.0–11.1 旧版本需要），导致部分机型读不到值
推荐写法：
body { padding-top: constant(safe-area-inset-top, 0px); padding-top: env(safe-area-inset-top, 0px); }
Android 设备要不要加 viewport-fit=cover？
可以加，无副作用。Android 浏览器（包括 Chrome、Firefox）完全忽略该属性，既不报错也不影响布局，所以一套 meta 可共用全平台。
但要注意：加了之后，iOS 上内容会撑满屏幕，而 Android 仍按默认行为渲染——这意味着你必须靠 CSS 的 env() 或媒体查询做差异化处理，不能只依赖 meta 本身来“自动适配”。
真正容易被忽略的是：viewport-fit=cover 只是“允许渲染到安全区外”，不是“自动避让”；所有顶部状态栏、底部 Home Indicator 下方的空间，都得靠 CSS 主动预留，否则文字/按钮必然被遮挡——这个逻辑必须由开发者自己控制，浏览器不会帮你做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
