viewport标签必须放在最前面且配对使用width=device-width和initial-scale=1.0，否则导致文字模糊、点不准、横向滚动；user-scalable=no等禁用缩放属性应避免，内容溢出才是常见真因。
移动端页面文字糊、按钮点不准、布局横向滚动——90% 是 viewport 标签没写对，或根本没写。 它不是“锦上添花”，而是浏览器渲染的开关，缺了就直接走默认 980px 宽度缩放逻辑。
viewport 必须放在
浏览器解析 HTML 是顺序执行的，viewport 必须在首次渲染前生效。塞在 里、用 JS 动态 appendChild、或被框架模板漏掉，都会导致 Safari/Android WebView 直接忽略。
- ✅ 正确位置：
内，且越靠前越好（最好紧贴<meta charset>后） - ❌ 错误做法：Vue 的
<client-only></client-only>里塞、Next.js 的getServerSideProps里漏传、CMS 自动生成两个viewport（以第一个为准，但中间已错乱） - ? 调试方法：打开 DevTools → Elements → 搜索
viewport，确认它出现在且 content 值是你写的那个；再执行document.querySelector('meta[name="viewport"]')?.content看是否被覆盖
width=device-width 和 initial-scale=1.0 必须配对出现
只写 width=device-width，iOS Safari 仍可能按 980px 渲染再缩小；只写 initial-scale=1.0，安卓某些 WebView 会无视设备宽度计算，导致横向滚动。两者缺一不可。
- ✅ 推荐最小可用配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - ❌ 危险写法：
width=375（折叠屏横屏时崩）、width=1200（小屏强制拉伸）、initial-scale=1不带width=device-width - ⚠️ 注意：
device-width不是物理像素，是经 DPR 换算后的 CSS 像素宽度，硬写死数值毫无意义
user-scalable=no 和 maximum-scale=1.0 基本该删掉
加了 user-scalable=no，iOS 13+ 已基本无视，Android 行为不一致；而 maximum-scale=1.0 会直接禁用系统级「更大字体」和辅助缩放，违反 WCAG 可访问性要求，苹果也明确不推荐。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理替代：
touch-action: manipulation控制区域手势，或 CSS 限制特定容器可缩放 - ❌ 高危组合：
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0—— 锁死所有缩放能力，老年用户和视障用户无法使用 - ? 特殊场景例外：Kiosk 自助终端、嵌入 WebView 且 native 层已统一接管缩放（需客户端配合）
写了 viewport 还是不正常？先查内容是否溢出视口
initial-scale=1.0 不是万能锁。iOS Safari 在检测到页面内容宽度 > 视口时，会强制缩小以显示全部内容，此时声明直接被无视——问题不在标签，而在你的 CSS。
- ? 常见溢出原因：
white-space: nowrap未重置、min-width: 1200px固定宽容器、浮动元素未清除、table无table-layout: fixed - ✅ 快速验证：Chrome DevTools 切换设备模式 → 「Capture screenshot」看真实渲染宽度，别只信 CSS 声明
- ?️ 必配 CSS：图片加
max-width: 100%; height: auto;，字体优先用rem或em，容器避免写死width: 375px
真正卡住人的地方，从来不是怎么写那行 meta，而是它写了之后，CSS 还在悄悄撑开视口——viewport 是起点，不是终点。
