width=device-width是告诉浏览器使用设备真实宽度而非默认980px桌面视口，避免内容缩小、文字模糊、点击失准；initial-scale=1.0则禁用ios safari自动缩放逻辑，确保布局准确。
width=device-width 是在告诉浏览器“别按桌面模式猜了，就用我这台手机的真实宽度”
移动端浏览器默认启用“桌面视口”（layout viewport），宽度约 980px，导致文字极小、必须双击放大。设置 width=device-width 后，浏览器改用设备的 CSS 像素宽度（如 iPhone 14 是 390px），让布局容器能真正撑满屏幕。
常见错误包括：
-
width=320：硬编码 iPhone 5 宽度，在大屏安卓机上内容被横向压缩，出现滚动条 -
width=1024：直接退化为平板桌面视图，在手机上必须左右拖拽 - 完全不写
width：依赖浏览器默认行为，iOS Safari 和部分安卓 WebView 表现不一致
initial-scale=1.0 的本质是“禁用 iOS Safari 的自动字体缩放逻辑”
iOS Safari 有个隐藏规则：当页面内有小于 16px 的文本且未声明 initial-scale 时，会自动放大整个页面（模拟“可读性优化”），结果是布局错位、按钮变小、表单失焦。设 initial-scale=1.0 就是明确告诉它：“别动，我就要这个比例”。
注意这不是“让页面显示为 1:1”，而是阻止意外缩放。实际渲染效果还受 width 影响——比如 width=640, initial-scale=1 会让视口变宽但不放大内容；而 width=320, initial-scale=2 视口变窄但内容被放大两倍，最终看到的区域其实一样。
width 和 initial-scale 组合出的实际视口尺寸由乘法关系决定
布局视口宽度 = width 值 ÷ initial-scale。例如：
-
width=device-width, initial-scale=1.0→ 视口宽度 ≈ 设备 CSS 宽度（推荐） -
width=320, initial-scale=0.5→ 视口宽度 = 320 ÷ 0.5 = 640px（内容被缩小，适合做“缩略预览”） -
width=768, initial-scale=1.5→ 视口宽度 = 768 ÷ 1.5 = 512px（强制窄视口，慎用）
这个公式在调试时很实用：如果发现页面横向溢出或留白异常，先查这两个值的除法结果是否匹配你预期的视口宽度。
user-scalable=no 不该和 initial-scale=1.0 捆绑使用
很多模板盲目复制 user-scalable=no, maximum-scale=1.0, minimum-scale=1.0，以为这样“更稳定”。但 iOS 10+ 已忽略 user-scalable=no，且 WCAG 2.1 明确要求允许用户缩放以满足视力障碍需求。更现实的做法是只保留 width=device-width, initial-scale=1.0，靠 CSS 的 font-size、rem 或 clamp() 实现真正的可访问缩放适配。
真正需要限制缩放的场景极少，比如全屏游戏或特定 kiosk 模式——那时也该用 JS 监听 touchmove 阻止事件，而不是依赖已失效的 meta 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
