viewport meta 标签必须写在 中且仅出现一次，内容须包含 width=device-width, initial-scale=1.0，禁用 user-scalable=no 或 maximum-scale 以保障可访问性与兼容性。
viewport meta 标签必须写在 里
如果 <meta name="viewport"> 出现在 中，或被 JS 动态插入，多数浏览器会忽略它，导致页面不缩放、文字过小、布局错乱。移动端 Safari 和 Chrome 都只在解析 时读取该标签。
正确位置示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
content 属性里不能漏掉 initial-scale=1.0
只写 width=device-width 而不带 initial-scale=1.0，某些 Android 浏览器（如旧版 WebView）会默认以 1.0 缩放但不锁定，导致横屏时内容被拉伸或截断；iOS Safari 则可能触发双击缩放行为，破坏自适应体验。
常见错误写法（不推荐）：
<meta name="viewport" content="width=device-width">
应始终包含：
-
width=device-width：让视口宽度匹配设备逻辑像素宽度 -
initial-scale=1.0：确保加载即按 1:1 渲染，禁用初始缩放
避免使用 user-scalable=no 或 maximum-scale
加 user-scalable=no 或 maximum-scale=1.0 会禁用用户双指缩放，在可访问性上违反 WCAG 指南，iOS 系统甚至可能直接忽略该标签（尤其 iOS 10+）。部分安卓浏览器也会降级处理，导致 initial-scale 失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
除非有强交互约束（如 WebGL 全屏画布），否则不要写：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
更安全的底线是只保留必要参数：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
响应式布局失效时先查 viewport 是否被覆盖
常见干扰源：第三方 SDK（如微信 JS-SDK、支付宝小程序 bridge）、构建工具插件（如某些 Vue CLI 插件自动注入 viewport）、CMS 模板硬编码了另一套 meta 标签。
排查步骤：
- 用浏览器开发者工具检查最终 HTML 的
，确认只有一条<meta name="viewport"> - 搜索页面源码中是否有多处
viewport，后写的会覆盖前写的 - 查看 Network → HTML 响应体，排除服务端模板拼接导致重复注入
真实项目里，80% 的“自适应失灵”问题其实不是 CSS 写错了，而是 viewport 标签被悄悄覆盖或删掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
