viewport meta 标签失效主因是位置错误、动态插入、框架覆盖或CSS撑爆；必须静态置于<meta charset>后第一位且唯一，width=device-width与initial-scale=1.0须成对出现，禁用user-scalable=no以保障可访问性，CSS溢出也会导致缩放失效。
viewport meta 标签没生效？不是参数写错了，是它根本没被浏览器读到——位置错、动态插入、被框架覆盖、CSS 撑爆，四类问题占了 90% 的失效原因。
viewport 必须静态写在 最前面，且只能有一个
浏览器只在 HTML 解析初期读取 meta name="viewport"，之后任何 JS 动态创建、框架（如 Next.js App Router、Vue mounted）注入、或 CMS 自动追加的同名标签，全都不起作用。更隐蔽的是：SSR 框架里 next/head 没配 SSR、html-webpack-plugin 开了 minify: true、甚至 <!-- comment --> 注释挤在 <meta charset> 后面，都会导致它被跳过。
- ✅ 正确顺序：
<meta charset="UTF-8">→<meta name="viewport" content="width=device-width, initial-scale=1.0">→<title>→ 其他<link>/<script> - ❌ 验证方法：真机访问后，用「查看网页源代码」确认该标签存在且唯一；控制台执行
document.querySelector('meta[name="viewport"]')，看content值是否为你写的原始字符串 - ⚠️ 注意：
<html>元素的clientWidth在 iPhone 13 模拟器下应接近 390，若仍是 980，说明 viewport 完全未生效
width=device-width 和 initial-scale=1.0 必须成对出现
这两个参数是绑定生效的。单独写任何一个，iOS Safari 或旧版 UC 都可能 fallback 到默认 980px 渲染，结果要么文字糊成一片，要么横向滚动条弹出——这不是 bug，是规范行为。
- 只写
width=device-width：浏览器仍按 980px 渲染，再缩放适配，实际效果是“宽了但字小” - 只写
initial-scale=1.0：视口宽度还是 980px，强行放大到 1:1，内容溢出、滚动条出现 - 硬编码
width=375：在 iPad、折叠屏、横屏下直接崩坏，媒体查询断点全部错位 - 最低可用配置就是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
user-scalable=no 和 maximum-scale=1 是可访问性雷区
它们看似“稳”，实则绕过系统级「更大字体」设置、让 VoiceOver 报错、双击放大失效，直接违反 WCAG 2.1 标准。iOS 16+ 和 Android Chrome 2025+ 已基本忽略 user-scalable=no，但副作用还在。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ⛔ 禁用缩放后，视力障碍用户无法放大阅读，iOS「显示大小」设置完全失效
- ✅ 替代方案：
touch-action: manipulation加在<body>或根容器上，保留单指滚动和辅助缩放，只禁双指缩放和长按 - ⚠️ 若真需限制范围，可用
minimum-scale=0.5, maximum-scale=2.0，但务必在 iPhone、Pixel、折叠屏真机上实测
写了 initial-scale=1 却还是被缩放？大概率是 CSS 溢出
浏览器优先保障“用户能看清”。只要页面内容宽度 > device-width，它就会无视 initial-scale=1 强制缩小——这是设计行为，不是 bug。
- 常见溢出元凶：
white-space: nowrap的长文本、min-width: 1200px的容器、未清除浮动的父元素、flex子项没设flex-shrink: 1 - 验证方法：Chrome DevTools 切 iPhone 模拟器后，打开「Rendering」面板勾选「Layout Shift Regions」，看哪块区域撑出了视口
- 配套必须做：
img加max-width: 100%; height: auto;，删掉所有硬编码width: 375px或font-size: 16px，改用rem/vw
最常被忽略的是：viewport 写对了，但 <html> 上写了 font-size: 62.5% 却没配合 rem 计算，导致所有 rem 值在 DPR > 1 的真机上错乱——这种问题不会在桌面模拟器里暴露。
