必须搭配 initial-scale=1.0 才能确保视口宽度等于设备屏幕宽度并正确渲染，因为 width=device-width 仅设置布局视口宽度但不控制缩放，而 initial-scale=1.0 强制 1:1 渲染，使 CSS 像素与设备逻辑像素一一对应。
只写 width=device-width 是不够的，必须搭配 initial-scale=1.0 才能真正让视口宽度等于设备屏幕宽度，并正确渲染。
为什么不能只靠 width=device-width
这个属性只是告诉浏览器“把布局视口设为设备逻辑像素宽度”，比如 iPhone 14 是 390px、Pixel 7 是 412px。但它不控制缩放行为：
- iOS Safari 可能仍按默认 980px 宽度渲染，再整体缩小显示，导致文字模糊、按钮点击偏移
- 部分安卓浏览器会忽略缩放逻辑，页面内容被强制放大（如 1.25 倍），实际视口变窄，布局错乱
- PC 浏览器模拟移动设备时，仅设 width 会导致视口尺寸正确但比例失真，调试失效
必须同时设置 initial-scale=1.0
这一项强制页面以 1:1 比例渲染，确保 CSS 像素与设备逻辑像素一一对应：
- 避免 iOS 自动放大小字号文本引发的重排和跳动
- 防止安卓浏览器擅自调整默认缩放，破坏 rem 布局或媒体查询断点
- 让
1rem = 16px、100vw = 设备宽度等计算真正可靠
推荐的 viewport 配置写法
基础必备组合（所有移动端页面都应使用）：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0">如需进一步控制交互，可补充：
-
maximum-scale=1.0和user-scalable=no：禁用双指缩放（适合 WebApp 场景） - 慎用
minimum-scale或自定义缩放范围，可能影响无障碍访问
验证是否生效的小技巧
在真机上打开开发者工具（如 Safari 的 Web Inspector 或 Chrome Remote Debugging），检查：
- 页面
<html>元素的clientWidth是否接近设备逻辑宽度（如 390、412） - 缩放状态是否为 1，没有自动放大或缩小痕迹
- 一段
width: 100vw的 div 是否刚好铺满屏幕，无横向滚动条
