viewport 必须同时包含 width=device-width、initial-scale=1.0 和 viewport-fit=cover，缺一不可；否则 ios 会回退至 980px 视口或无法启用安全区变量，导致缩放异常、内容遮挡、点击偏移等问题。
viewport meta 属性写错，页面在手机上就永远缩成一团、文字发虚、点击区域偏移——这不是样式问题，是浏览器根本没按你预期的尺寸渲染。
width=device-width 和 initial-scale=1.0 必须同时存在
漏掉其中任意一个，iOS Safari 就会回退到默认的 980px 布局视口，强行缩小显示，导致字体模糊、touch 事件坐标错乱、1rem 计算失准。
-
width=device-width不是像素值，而是动态读取设备当前逻辑宽度（如 iPhone 15 是 393px，横屏变 852px） - 硬写
width=375只在少数机型“看起来刚好”，但在 iPad、折叠屏、高 DPR 安卓机上必然错位或溢出 -
initial-scale=1.0确保视觉视口与布局视口等宽，让 CSS 像素对齐设备独立像素（DIP），直接影响 Retina 屏清晰度 - 某些 CMS 或框架会插入多个
viewport标签，浏览器以最后一个为准，务必用document.querySelector('meta[name="viewport"]')检查实际生效值
viewport-fit=cover 是 iOS 全面屏全屏的硬性开关
不加它，iPhone X 及后续机型的状态栏和底部 Home Indicator 区域会强制留白或遮挡内容，视觉上根本不算“全屏”。它不是可选项，而是启用安全区变量的前提。
- 必须写进同一个
<meta name="viewport">的content属性里，且用逗号分隔：content="width=device-width, initial-scale=1, viewport-fit=cover" - 常见错误：等号前后有空格（
viewport-fit = cover）、漏逗号、换行、或拆成两个meta标签——Safari 会直接忽略整个声明 -
viewport-fit=cover本身不改变布局，只让env(safe-area-inset-top)等函数返回非零值；否则这些函数一律返回0px - Android 忽略该属性，无副作用，可放心共用
env() 安全区变量必须配合 viewport-fit=cover 才有效
加了 viewport-fit=cover 后，页面撑满物理屏幕，但顶部状态栏、底部 Home Indicator 下方的内容会被遮挡。必须用 CSS 动态预留空间。
- 正确写法（兼容 iOS 11.2+ 与旧版）：
padding-top: constant(safe-area-inset-top, 0px); padding-top: env(safe-area-inset-top, 0px); -
env()是标准，constant()是 iOS 11.0–11.1 的临时方案，二者需同时声明，且用calc()回退不可靠，直接并列更稳 - 不能在内联
style属性中使用env()，只支持<style></style>块或外部 CSS 文件 -
env(safe-area-inset-bottom)常用于fixed底部按钮，避免被 Home Indicator 遮住
user-scalable=no 和 maximum-scale=1 在 2026 年已不可靠且高危
iOS 16.4+ 已限制 user-scalable=no 生效，Safari 主动忽略它以保障可访问性；Android 各厂商 WebView 行为不一致，有的照办、有的跳过。
- 强行禁用缩放违反 WCAG 2.1（要求支持 200% 缩放），也会让系统级辅助功能（如「更大字体」）失效
- 若真有强约束需求（如自助终端），应改用
touch-action: none+ 手动拦截touchstart，而非依赖meta -
maximum-scale=1.0单独使用无效，必须和initial-scale=1.0同时存在，否则部分安卓浏览器直接忽略 - 表单弹出键盘时页面被顶起，本质是视觉视口压缩，靠禁用缩放治标不治本；更稳妥的是监听
resize或用visualViewportAPI 动态调整
真正影响全屏效果的，从来不是某一行代码是否“写了”，而是 viewport-fit=cover 是否与基础参数共存、env() 是否在正确上下文中被调用、以及用户是否真的从主屏幕图标启动——这三点缺一不可，且任一环节出错，都会让“全屏”变成顶部留白、底部遮挡、或干脆带地址栏的假象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
