viewport标签必须静态写在<head>最前面且唯一，content值仅限width=device-width, initial-scale=1.0，二者缺一不可；动态插入、位置靠后、重复标签或内容溢出均会导致失效。
viewport 标签必须静态写在 最前面
浏览器只在解析 HTML 初期读取 meta name="viewport"，之后任何动态插入（比如 document.head.appendChild()）、或塞进 里，Safari 和多数 Android WebView 都直接忽略。它不是“写了就行”，而是“第一个且唯一一个才生效”。
- ✅ 正确位置：
内，紧贴<meta charset>或<title></title>后，早于所有<link>、<script></script>和 CSS 引入 - ❌ 常见失效：Next.js 的
getServerSideProps漏传、Vue 组件mounted里 append、CMS 自动生成两个同名标签（只认第一个） - ⚠️ 调试方法：真机上「查看网页源代码」确认存在且唯一；控制台执行
document.querySelector('meta[name="viewport"]')?.content看值是否被覆盖
width=device-width 和 initial-scale=1.0 必须配对出现
这两个参数是绑定生效的，缺一不可。单独写任何一个，iOS Safari 或旧版 UC 浏览器仍可能 fallback 到默认缩放（比如 0.5x），导致文字发虚、1px 边框变粗、媒体查询断点错位。
- 只写
width=device-width：浏览器先按 980px 渲染再缩小，布局视口宽度对了，但视觉仍是缩放态 - 只写
initial-scale=1.0：视口宽度还是 980px，强行放大到 1:1，内容横向溢出、滚动条出现 - 硬编码
width=375或width=414：在 iPad（768px）、折叠屏横屏（820px+）下直接崩，响应式断点全失效
user-scalable=no 和 maximum-scale=1.0 在 2026 年已基本失效且高危
加了 user-scalable=no，iOS 16+ 几乎无视，Android 各厂商 WebView 行为不一致；但它造成的伤害是确定的：系统级「更大字体」设置失效、VoiceOver 报错、视障用户无法放大阅读——这违反 WCAG 2.1 可访问性标准。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ⛔ 高危组合：
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0—— 锁死所有缩放能力，上线前多台真机实测也救不了体验 - ✅ 替代方案：在根容器上加
touch-action: manipulation，保留单指滚动和辅助功能缩放，只禁双指缩放和长按 - ⚠️ 特殊例外仅限 Kiosk 自助终端，且需 native 层统一接管手势（纯 Web 层做不到安全锁屏）
initial-scale=1.0 失效？先查内容是否撑爆视口
浏览器优先保障“用户能看清”。只要页面内容宽度 > device-width，它就会无视 initial-scale=1.0 强制缩小——这不是 bug，是设计行为。
立即学习“前端免费学习笔记（深入）”；
- 常见溢出元凶：
white-space: nowrap的长文本、未重置的min-width: 1200px、浮动元素未清除、flex子项没设flex-shrink: 1 - 调试技巧：Chrome DevTools 开启「Toggle device toolbar」后，用「Capture screenshot」看真实渲染宽度，别只信 CSS 声明
- 注意：
viewport-fit=cover是刘海屏适配用的，和缩放无关；高 DPR 图片模糊问题，得靠srcset或image-set()解决，不是viewport的事
div 的 min-width 撑开整页，initial-scale=1.0 就彻底失效。 
