viewport meta标签必须紧接<meta charset>置于head最前，且需同时包含width=device-width和initial-scale=1.0；单独缺失任一将导致布局视口错误、媒体查询失效及高DPR屏渲染异常。
viewport meta 标签必须写在 最前面
浏览器解析 HTML 是从上到下顺序执行的，meta name="viewport" 如果出现在 <title> 后面、或者被 CMS 动态注入、甚至塞进 <body> 里，就大概率失效。iOS Safari 和多数安卓 WebView 都只读取第一个匹配的 meta[name="viewport"]，后续重复声明会被忽略。
常见错误现象：
- 页面加载瞬间缩一下再“弹开”，说明 viewport 生效晚了
-
document.querySelector('meta[name="viewport"]')取到的content值不是你写的那个，而是 CMS 自动生成的旧值 - Webpack 构建时启用了
html-webpack-plugin的minify: true，把注释<!-- ... -->删掉后，意外把前置的meta挤到了后面
实操建议：
- 确保
<meta charset="UTF-8">和<meta name="viewport" content="width=device-width, initial-scale=1.0">是<head>中前两条标签 - Next.js App Router 中避免用
next/head，改用metadata对象或根布局中硬编码meta - 调试时直接右键「查看网页源代码」，确认原始 HTML 里这两行是否紧挨着
<head>开始
width=device-width 和 initial-scale=1.0 必须同时存在
单独写 width=device-width，在旧版 UC 浏览器或某些 Android WebView 中仍可能触发默认缩放；只写 initial-scale=1.0，则布局视口还是 980px，CSS 中的 100vw 仍是 980px，而不是设备逻辑宽度。
立即学习“前端免费学习笔记（深入）”；
为什么必须配对：
-
width=device-width把布局视口（Layout Viewport）设为设备逻辑像素宽（如 iPhone 15 竖屏是 393px） -
initial-scale=1.0让视觉视口（Visual Viewport）和布局视口等宽，保证 CSS 像素与 DIP 对齐，高 DPR 屏（如 iPhone 的 3x）才能清晰渲染 - 漏掉任一，
@media (max-width: 768px)可能不触发，border: 1px solid渲染出 2~3 物理像素粗，Canvas 尺寸错乱
注意：不要写 width=375 或 width=414 —— 这是设计稿基准，不是运行时设备宽度，横屏时会直接崩。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
user-scalable=no 和 maximum-scale=1 是高危组合
这两个参数常被当成“防误触”手段，但实际带来严重副作用：iOS 16.4+ 已限制 user-scalable=no 生效；Android Chrome 2025+ 也逐步弃用；更重要的是，它直接违反 WCAG 2.1 可访问性标准，视障用户无法放大文本阅读，VoiceOver 双指缩放失效。
真实影响场景：
- PWA 安装后横竖屏切换时视口卡死，
maximum-scale=1.0+minimum-scale=1.0会让浏览器失去弹性调整空间 - iOS 上禁用缩放后，输入框聚焦时键盘弹出导致页面重排，视口计算异常
- 部分银行/政务类站点因强加该组合，被苹果 App Store 审核驳回（要求提供可访问替代方案）
替代方案：
- 需要防误操作，用 CSS
touch-action: manipulation加在<body>上，既提升点击响应，又不锁死缩放 - 真要限制缩放范围，可用
maximum-scale=5.0而非1.0，留出辅助阅读余量
调试 viewport 是否生效的三个硬核方法
光看页面“好像正常”不等于 viewport 生效。很多 bug 表面是样式错位，根源是视口没起作用。
验证步骤：
- 打开开发者工具 → Elements → 检查
meta[name="viewport"]的content值是否为你写的原始字符串（注意空格、逗号、引号） - 在控制台执行
document.documentElement.clientWidth：iPhone 13 应返回390，若返回980，说明 viewport 完全没生效 - 用真机 Safari 连接 macOS 控制台，在
console.log中打印window.visualViewport.width和window.visualViewport.scale，确认 scale 是否稳定为1
最容易被忽略的一点：SSR 框架（如 Next.js、Nuxt）生成的 HTML 中，如果服务端没注入 viewport meta，而靠 JS 在 mounted 阶段动态插入，那首屏渲染时 viewport 就是缺失的——这会导致 iOS 上首次加载必闪一次缩放动画。
