HTML视口配置是屏幕适配的硬性前提，缺失则所有CSS适配失效；浏览器默认以980px布局视口渲染，导致文字过小、媒体查询错位、触摸目标偏移，必须用width=device-width和initial-scale=1共同声明并置于head最前。
不配 <meta name="viewport">，后续所有 CSS 适配都白搭——这是硬性前提，不是可选项。
viewport 缺失时浏览器怎么“自作主张”
移动端浏览器（如 Safari、Chrome for Android）默认用约 980px 的布局视口渲染页面。哪怕你写了 width: 100% 或 max-width: 100vw，CSS 计算仍基于这个 980px 宽度，再整体缩放进手机屏幕。结果就是：
- 文字细得像针尖，必须双击放大才能读
-
100vw是980px，不是你设备的390px（iPhone 15 竖屏逻辑宽度） - 媒体查询断点错位：写
@media (max-width: 768px)，实际触发点可能在300px视觉宽度下就命中了 - 触摸目标偏移：按钮按下去，实际触发的是旁边元素
width=device-width 和 initial-scale=1 缺一不可
这两个参数必须同时存在，且顺序无关紧要，但缺一就会出问题：
- 只写
width=device-width：某些安卓 WebView 可能忽略缩放逻辑，导致页面加载瞬间文字过小、布局跳动 - 只写
initial-scale=1：iOS Safari 仍按980px渲染再缩小，rem基准错乱、高 DPR 图片模糊 - 正确写法（放在
<head>最前面）：<meta name="viewport" content="width=device-width, initial-scale=1">
user-scalable=no 这类参数为什么危险
禁用缩放看似“防误操作”，实则带来三重风险：
立即学习“前端免费学习笔记（深入）”；
- 违反 WCAG 无障碍标准：视力障碍用户依赖缩放阅读，强制禁用等于拒绝这部分用户
- 在部分安卓系统中，
user-scalable=no+maximum-scale=1组合可能导致 pinch-zoom 失效且无法恢复 - 旧版 UC 浏览器等对
maximum-scale支持不一致，反而引发渲染异常 - 真正需要控制缩放的场景（如地图、图表），应通过 CSS
touch-action: none或 JS 拦截事件，而非粗暴锁死 viewport
viewport 不是“让页面看起来像手机”的美化开关，而是告诉浏览器：“请用设备真实的逻辑像素宽度来计算 CSS”。这一步错了，后面 rem、flex、@media 全部跑偏——而很多人直到上线后被用户反馈“字太小”才意识到，问题出在第一行 meta 上。
