viewport meta 标签
viewport meta 标签是手机自适应的第一行代码。不加它时，手机浏览器会假设页面宽 980px，然后把整个页面缩小塞进屏幕——于是所有文字都小到看不清。加上 width=device-width 后，浏览器才以真实屏幕宽度（如 375px）来排版。
initial-scale=1.0 表示初始缩放为 1，配合 width=device-width 就是“1 CSS 像素 = 1 设备独立像素”的标准状态。
- width=device-width：视口宽度 = 设备宽度
- initial-scale=1.0：初始不缩放
- 不要写 maximum-scale=1 / user-scalable=no：会禁用用户缩放，属于反无障碍
HTML
<!-- 标准写法，99% 的自适应页面都长这样 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 可选：viewport-fit=cover 让内容延伸到刘海屏安全区外（配合 safe-area 使用） --> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <!-- 反面教材：锁定缩放，用户无法放大看小字 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
本节要点viewport meta 是自适应的“总开关”：width=device-width + initial-scale=1.0；永远不要禁止用户缩放。
