viewport-fit=cover是iOS刘海屏全屏适配的必要前提，必须与width=device-width、initial-scale=1.0共存才生效，缺一则env()安全区变量返回0px，导致顶部留白或底部被遮挡。
没写 <meta name="viewport">，页面在手机上缩成一团不是 bug，是浏览器在按默认 980px 渲染——加对了，才能让 CSS 像素真正对齐设备逻辑宽度。
为什么 width=device-width 不能写成 width=375
width=device-width 是一个动态值，由浏览器实时读取设备当前的逻辑像素宽度（比如 iPhone 15 竖屏是 393px，横屏变成 852px；Pixel 8 是 412px）。硬写 width=375 只在某几款 iPhone 上“看起来刚好”，但在 iPad、折叠屏、安卓大屏上会强制拉伸或裁剪，导致布局错位、文字溢出、横向滚动条出现。
- 设计稿按 375px 做，不代表 viewport 就该设成 375 —— rem 基准、媒体查询断点都依赖真实逻辑宽度，不是设计稿宽度
- 某些旧版 UC WebView 会忽略
initial-scale，但只要width=device-width存在，至少能避免默认缩放 - 横竖屏切换时，
width=device-width自动生效；写死数值则需 JS 监听orientationchange手动重写，成本高且易漏
initial-scale=1.0 不是可选项，而是触发理想视口的开关
只写 width=device-width 而不配 initial-scale=1.0，iOS Safari 和部分 Android WebView 仍可能以 0.5~0.8 缩放加载。这会导致：CSS 中的 1px 边框实际渲染为 2~3 物理像素却看起来更粗；@media (max-width: 768px) 断点错乱；Canvas 内容模糊。
-
initial-scale=1.0的本质是让视觉视口（Visual Viewport）和布局视口（Layout Viewport）等宽，使 CSS 像素与设备独立像素（DIP）对齐 - 它直接影响高 DPR 屏幕（如 iPhone 的 3x Retina）的清晰度，不是“不让用户缩放”，而是确保首次加载就按正确比例渲染
- 某些 CMS 或框架模板会在
<head>插入多个viewport标签，浏览器以最后一个为准——务必检查document.querySelector('meta[name="viewport"]')返回的content值是否是你写的那个
user-scalable=no 和 maximum-scale=1.0 在 2026 年已不可靠且高危
iOS 16.4+ 已限制 user-scalable=no 生效，Safari 会主动忽略它以保障可访问性；Android 各厂商 WebView 行为不一致，有的照办，有的跳过。强行禁用缩放不仅违反 WCAG 2.1（要求支持 200% 缩放），还会让系统级辅助功能（如「更大字体」）失效。
立即学习“前端免费学习笔记（深入）”；
- 真有强约束需求（如自助终端、车载界面），应改用
touch-action: none+ 手动拦截touchstart，而非依赖 meta 参数 -
maximum-scale=1.0+minimum-scale=1.0效果等同于user-scalable=no，但更隐蔽、更难调试，上线前必须实测多台真机 - 现代浏览器默认就是
user-scalable=yes，显式写出只是强化语义，不写也不影响行为
viewport-fit=cover 是刘海屏适配的起点，但不是终点
viewport-fit=cover 的作用是告诉浏览器“允许内容延伸到安全区外”，但它本身不移动元素、不避让状态栏或底部横条。真正控制安全区的是 CSS 的 env(safe-area-inset-top)、env(safe-area-inset-bottom) 等环境变量。
- 必须配合 CSS 使用：
padding-top: env(safe-area-inset-top)、padding-bottom: env(safe-area-inset-bottom) - 仅在 iOS 11+ 和部分安卓新版本支持，老设备会忽略该属性，需做降级（比如用
@supports (padding: env(safe-area-inset-top))包裹） - 如果页面有固定定位的顶部导航栏或底部 TabBar，漏掉
viewport-fit=cover可能导致内容被刘海或圆角遮挡，但写了不配 CSS 也白搭
viewport 不是“写完就适配好了”的开关，它只决定浏览器用多宽来渲染页面；后续所有 CSS 单位选择（rem/em vs px）、媒体查询断点、图片 srcset、Canvas DPR 校正，都建立在这个基础上。最容易被忽略的是：它必须出现在 <head> 最前面，动态插入、塞在 <body> 里、或被 SSR 模板漏掉，都会导致首次渲染已错，后续补救无效。
