不加<meta name="viewport">会导致移动端按默认980px布局视口渲染，内容被压缩、文字模糊、点击失准；其本质是浏览器未启用设备真实逻辑宽度（如393px）作为布局基准，致使所有CSS计算失真。
不加 <meta name="viewport">，移动端浏览器会按桌面宽度（通常是 980px）渲染页面，导致内容被压缩成一小片、文字看不清、按钮点不准——这不是 CSS 写得不好，是浏览器根本没按你预期的“设备宽度”去布局。
为什么默认渲染宽度是 980px？
早期移动浏览器为兼容 PC 网站，默认把视口设为约 980px 宽（即“布局视口”），再整体缩放进小屏幕。比如 iPhone 15 的逻辑宽度是 393px，但页面仍按 980px 排版，结果就是所有元素按比例缩小到约 40% 大小，用户必须双指放大才能阅读。
- 这个行为与 CSS 无关，是浏览器渲染引擎的默认策略
- 即使你用了
flex或rem，只要没声明viewport，布局计算基准仍是 980px - Chrome DevTools 的 mobile 模拟器也会复现这一问题，但 Firefox 的模拟器可能不准确
width=device-width 到底在做什么？
它把布局视口宽度重置为设备的逻辑像素宽度（如 iPhone 15 是 393px），让 CSS 百分比、max-width: 100%、媒体查询等真正基于设备实际可用空间计算。
- 不是物理像素数，而是操作系统报告的“CSS 像素”宽度（考虑了 DPR，比如 iPhone 的 3x 屏仍报 393px）
- 设成固定值如
width=600会导致在小屏上横向滚动，在大屏上留白，完全违背响应式初衷 - 只写
width=device-width不加initial-scale=1.0，某些 Android 浏览器仍可能默认缩放（比如初始显示为 0.8 倍）
initial-scale=1.0 为什么不能省？
它强制让 1 个 CSS 像素 = 1 个设备独立像素（DIP），避免字体模糊、边框发虚、点击区域偏移。
立即学习“前端免费学习笔记（深入）”；
- 没它时，浏览器可能把 393px 宽的布局视口进一步缩放到 420px 渲染区，再映射到物理屏——造成 DPI 混乱
- 尤其影响
border: 1px solid：在高 DPR 设备上，没initial-scale=1.0可能渲染成 0.33px 物理线宽，肉眼几乎不可见 -
user-scalable=no和maximum-scale=1.0虽能锁死缩放，但会违反 WCAG 可访问性要求，iOS 10+ 已限制其效果
真正容易被忽略的点是：<meta name="viewport"> 必须放在 <head> 最早位置——如果前面有 <script> 或 <link rel="stylesheet">，部分 Android 浏览器会先按默认 980px 渲染一次，再重排，造成闪动或错位。
