viewport-fit=cover是刘海屏全屏适配的必要开关，必须与width=device-width、initial-scale=1.0共存才生效；缺一不可，否则env()返回0，安全区适配失效。
不配 viewport，CSS 就算写对了也白写——布局视口错位，媒体查询失效，vw 单位失准，fixed 元素飘移，全是它惹的祸。
width=device-width 是所有 CSS 布局生效的前提
移动端浏览器默认把布局视口设为 980px（比如 iOS Safari），远大于 iPhone 15 的 393px 逻辑宽度。这意味着：100vw 是 980px，不是屏幕宽；@media (max-width: 768px) 永远不会触发；html { font-size: 100px } 在设计稿 375px 下直接错位。
加 width=device-width 才让布局视口宽度 = 设备当前逻辑像素宽度（竖屏 393px、横屏 852px），CSS 计算才有真实依据。
- 漏掉它，哪怕写了
initial-scale=1.0，部分安卓 WebView 仍按 980px 渲染 - 硬写
width=375是错的——设备横屏时布局视口卡死在 375px，内容被截断 -
width=100%在<meta>中根本无效，HTML 不支持百分比值
initial-scale=1.0 必须和 width=device-width 绑定使用
单独写 width=device-width，某些 Android 浏览器仍可能以 0.8 倍缩放加载页面，导致文字过小、点击区域偏移、高 DPR 屏幕模糊。
initial-scale=1.0 的作用不是“不让用户缩放”，而是强制视觉视口与布局视口等宽，让 CSS 像素与设备独立像素（DIP）对齐——这对 iPhone 的 3x Retina 屏尤其关键。
- 只写
width=device-width不写initial-scale=1.0：布局视口虽变，但渲染仍被压缩 - 只写
initial-scale=1.0不写width=device-width：视口还是 980px，只是放大显示，文字发虚、交互失准 - 两者缺一不可，且必须出现在同一
<meta>标签中
禁用缩放不能只靠 user-scalable=no
user-scalable=no 单独写基本无效。iOS Safari 10.3+ 和新版安卓浏览器已将其视为可访问性障碍，默认忽略。双击放大、系统字体缩放、辅助功能开关仍会触发缩放，且 fixed 元素位置直接错位。
真正起效的是三者组合：maximum-scale=1.0 + minimum-scale=1.0 + user-scalable=no，少一个都可能崩。
- 缩放后
float元素换行，不是 CSS 写错了，是亚像素四舍五入被放大后的必然结果（如 187.5px → 188px，两盒超父容器） - input 聚焦时 iOS 自动放大，仅靠
font-size: 16px或width: 100%拦不住，必须靠viewport控制 - JS 动态插入
<meta name="viewport">完全无效——必须静态写在最前面，Vue/React 项目常在这里翻车
viewport-fit=cover 是刘海屏适配的必要补丁
iPhone X 及后续机型有刘海和圆角，viewport-fit=cover 让页面铺满物理屏幕，避免黑边或内容被遮挡。但它只是第一步，还得配合 CSS 使用 env(safe-area-inset-top) 等安全区变量留白。
- 没加
viewport-fit=cover，页面默认缩进，顶部状态栏下留白过大 - 加了但没用
padding-top: env(safe-area-inset-top)，标题可能被刘海吃掉 - 该属性不影响非异形屏，可安全全局启用
最常被忽略的其实是顺序和时机：<meta name="viewport"> 必须是 中第一个标签，且不能由 JS 注入——真机上晚于 DOM 解析的任何操作都等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
