不加viewport标签移动端页面基本“半残”：文字小、布局溢出、媒体查询失效；必须置于最前，且width=device-width与initial-scale=1缺一不可，禁用user-scalable=no等破坏可访问性的参数。
不加 <meta name="viewport">，移动端页面基本就是“半残”状态——文字小得看不见、布局横向溢出、媒体查询不触发。它不是锦上添花，而是移动端渲染的开关。
viewport 必须写在 最开头，且不能动态插入
浏览器是顺序解析 HTML 的，<meta name="viewport"> 一出现就立刻应用。如果它被 JS 动态插入、写在 里、或被 SSR 框架的注释/占位符挤到 <title></title> 后面，iOS Safari 和部分 Android WebView 会直接忽略，按默认 980px 宽度渲染首屏。
- 错误位置：
<meta name="viewport" content=""> - 危险操作：用
document.querySelector('meta[name="viewport"]').setAttribute('content', ...)在 JS 中改值 - 框架注意点：Next.js 要确认
next/head输出后源码里它确实在靠前位置；Vue CLI 用vue-meta时也需检查最终 HTML - 重复声明时，只认第一个，后面全丢弃
width=device-width 和 initial-scale=1 缺一不可
只写 width=device-width，iOS 可能设对宽度但无视缩放逻辑；只写 initial-scale=1，某些安卓 WebView 仍按桌面宽度（如 980px）布局再缩放，导致横向滚动。二者必须共存，才能让 CSS 像素与设备物理像素对齐，媒体查询断点才准。
- 别写死数值，比如
width=375或width=414——折叠屏、平板、新机型一来就错乱 -
device-width不是屏幕物理像素，而是经 DPR 换算后的 CSS viewport 宽度（例如 iPhone 14 Pro 是 430px） - 不加
initial-scale=1，即使写了width=device-width，某些老安卓 WebView 仍可能默认缩放到 0.8x
别碰 user-scalable=no、maximum-scale=1 这类组合
这三者连用：user-scalable=no, maximum-scale=1, minimum-scale=1，等于锁死所有缩放能力。iOS 13+ 会降权该页面，甚至弹提示“该网站可能无法正常工作”；更关键的是，它直接违反 WCAG 2.1 可访问性标准——视力障碍用户开系统「更大字体」或「辅助缩放」后，文字会被截断、按钮点不到。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 业务页面请用
user-scalable=yes（可省略，默认即 yes） - 加了
maximum-scale=1，iOS 系统级「显示与文字大小」设置就失效 - 真需要限制缩放范围？可用
minimum-scale=0.5, maximum-scale=2.0，但务必搭配真机测试 - Web App 添加到主屏后，iOS 会强制忽略
maximum-scale，但user-scalable=no仍会锁死手势
viewport 写对了，但页面还是错乱？检查配套点
<meta name="viewport"> 只管“画布怎么铺开”，不解决布局、字体、图片的具体适配。常见翻车都出在这里：
- CSS 里写了
width: 375px或font-size: 16px这种硬编码——该用%、rem、vw的地方没换 - 图片没加
max-width: 100%; height: auto;，直接撑爆容器引发横向滚动 - 媒体查询用了
@media (max-width: 767px)却忘了在大屏样式里重置display或flex-direction，导致小屏规则残留覆盖 - 断点数值照搬别人家的 768/1024，实际内容在 640px 就已挤不开，却还在等 768px 才响应
真机调试时行为不一致？优先排查 Chrome DevTools 的设备模拟器只模拟视口尺寸，不模拟真实 DPR、系统缩放或 iOS Safari 的 layout width 计算逻辑。
