核心答案是：viewport 的 width 应设为 device-width，且必须搭配 initial-scale=1。它确保视口宽度等于设备 CSS 像素宽，避免缩放与模糊；禁用 user-scalable=no 以保障可访问性；需硬编码于 HTML 中并避免重复声明。
移动端页面不缩放、文字不模糊、布局不溢出，核心就靠 <meta name="viewport"> 这一行。没它，或写错参数，CSS媒体查询和百分比布局基本白搭。
viewport 的 width 值到底该设成多少？
绝大多数情况直接用 width=device-width —— 它让视口宽度等于设备物理屏幕的 CSS 像素宽度（即 device-width，不是分辨率）。这能避免 iOS Safari 自动缩放、Android 浏览器误判为桌面页。
别写死成 width=375 或 width=1200：前者在大屏手机上内容被拉伸，后者在小屏上强制横向滚动，且无法适配折叠屏、横屏等动态场景。
例外极少：仅当明确要禁用响应式（如 legacy 管理后台），才用 width=1280 类固定值，但必须同步禁用用户缩放（user-scalable=no），否则体验极差。
立即学习“前端免费学习笔记（深入）”；
initial-scale=1 和 user-scalable=no 到底要不要加？
initial-scale=1 必须加，且不能省略。它和 width=device-width 是绑定生效的：只写 width 不写 scale，部分 Android 低版本仍会默认放大文本；只写 scale 不写 width，iOS 可能回退到 layout viewport 宽度（980px 左右），导致内容挤压。
user-scalable=no 强烈不建议加。它会让视障用户无法放大文字，违反 WCAG 可访问性要求，iOS 甚至可能直接忽略该声明。真要限制缩放，应通过 maximum-scale=1.0, minimum-scale=1.0 软性约束，但依然不推荐。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见错误：<meta name="viewport" content="width=device-width, initial-scale=1"> 缺少逗号分隔符，或把 initial-scale 写成 scale=1 —— 后者完全无效。
响应式项目里 viewport 还要防哪些坑？
多个 <meta name="viewport"> 标签同时存在时，浏览器只认第一个，后面全被忽略。检查构建工具（如 Webpack HTML 插件、Next.js Head）是否重复注入。
服务端渲染（SSR）或静态生成（SSG）时，如果模板里漏写了 viewport，而 JS 动态插入，会导致 FOUC（闪白）或初始渲染错乱——必须在 HTML 字符串中硬编码写入。
WebView 场景（如 Cordova、微信内置浏览器）对 viewport 支持不一：某些安卓 WebView 忽略 minimum-scale，iOS WKWebView 在横屏切换时可能重置 scale。测试时务必用真机，别只信 Chrome DevTools 的设备模拟。
示例正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport 不是“写上就完事”的装饰标签，它的值直接影响 CSS 布局根尺寸、媒体查询触发点、字体渲染清晰度。哪怕只是改了一个像素的 margin，如果 viewport 没对齐设备逻辑像素，整个响应式链路就断了。
