移动端适配首要问题是正确设置<meta name="viewport">，必须包含width=device-width, initial-scale=1.0，否则浏览器按默认980px布局并缩放，导致文字过小、点击错位；user-scalable=no在iOS已失效，应改用minimum-scale=1, maximum-scale=1锁定缩放，viewport-fit=cover需配合env(safe-area-inset-top)处理刘海屏。
移动端页面在 iPhone 上文字小得看不清、按钮点不中，或者在安卓机上左右滑动才能看完一屏内容——绝大多数情况，问题就出在 <meta name="viewport"> 没写对，或者压根没写。
为什么 <meta name="viewport"> 一漏就全乱？
移动浏览器默认按「PC 宽度」（通常是 980px）渲染页面，再整体缩放塞进小屏幕。这意味着你写的 100px 宽度，在视觉上可能只占 30px 物理像素 —— 不是 CSS 错了，是布局视口（layout viewport）和视觉视口（visual viewport）根本没对齐。
加了 <meta name="viewport" content="width=device-width, initial-scale=1">，浏览器才明白：“别按 980px 布局了，就按这台手机真实的设备宽度来”。此时 100px 才真正对应屏幕上约 100 个 CSS 像素（受 dpr 影响，但比例可控）。
- 不加该标签 → 布局视口固定为 980px（或厂商自定义值），页面被强制缩小
- 只写
initial-scale=1不写width=device-width→ 部分安卓机型仍会 fallback 到默认宽度，缩放行为不稳定 -
width=device-width是语义声明，不是像素值；它等价于“取设备独立像素宽度”，iOS 和主流安卓都支持
user-scalable=no 和 maximum-scale=1 到底该用哪个？
想禁用用户双指缩放，很多人直接写 user-scalable=no，但这个属性在 iOS Safari 中早已被忽略（从 iOS 10 起），仅安卓 WebView 有部分支持。真要锁死缩放，必须靠 maximum-scale=1, minimum-scale=1 组合。
立即学习“前端免费学习笔记（深入）”；
-
user-scalable=no：iOS 无视，部分安卓 Webview 可能生效，但无法阻止键盘弹出时的自动缩放重排 -
maximum-scale=1, minimum-scale=1：更可靠，强制缩放区间锁定为 [1, 1]，Safari 和 Chrome on Android 均有效 - 注意：
maximum-scale=1单独使用不够，因为用户仍可缩小（比如误触三指）；minimum-scale必须同步设为 1
viewport-fit=cover 解决刘海屏/挖孔屏留白问题
iPhone X 及之后机型、部分安卓旗舰（如华为 Mate 系列、小米高端机）有安全区域（safe area），若页面未适配，顶部状态栏下方、底部 Home Indicator 区域会出现大片空白或内容被遮挡。
viewport-fit=cover 的作用是让布局视口“撑满”物理屏幕，而非收缩到安全区域内。但它只是第一步 —— 后续必须配合 env() 或 constant() 函数读取安全区偏移，否则内容会直接被切掉。
- 只加
viewport-fit=cover不处理 safe-area-inset-top 等变量 → 内容顶到状态栏里，文字被遮 - 加了
viewport-fit=cover+padding-top: env(safe-area-inset-top)→ 顶部留白正确，状态栏下内容可读 -
constant(safe-area-inset-top)是旧版 iOS 兼容写法，需与env()并存（iOS 11.2+ 支持 env，旧版 fallback constant）
设计稿是 750px，width 能不能直接写 width=750？
不能。硬写 width=750 在高 DPR 设备（如 iPhone 13 Pro，dpr=3）上会导致布局视口被设为 750 CSS 像素，但设备独立像素只有 390，结果是页面被横向拉伸、字体糊、交互错位。
所有基于设计稿宽度做适配的方案（如 rem、vw），前提都是布局视口宽度 = 设备独立像素宽度（即 width=device-width），再通过 JS 或 CSS 计算缩放比。强行固定 width 数值，等于放弃响应式基础。
- 750px 设计稿 → 对应的是逻辑宽度，不是物理宽度；适配靠的是动态计算（如
document.documentElement.style.fontSize = (window.innerWidth / 750) * 100 + 'px'） - 安卓部分低端机不支持
width的数值写法（只认device-width），写了反而触发兼容模式，布局更不可控 - 即使某机型支持
width=750，也会导致横屏时视口宽度突变为 750，而设备实际宽度可能只有 414，造成严重溢出
真正关键的不是参数堆得多，而是理解 width=device-width 和 initial-scale=1 如何协同把布局视口锚定到设备独立像素体系；其余参数都是在此基础上的微调。漏掉前者，后面全白搭。
