viewport标签必须置于<head>最前且仅一次，最简有效值为width=device-width, initial-scale=1；多参数或动态插入均无效，它是移动端渲染开关，缺失或错误将导致布局错乱、文字模糊及300ms点击延迟。
必须写在 <head> 里，且只认第一个；最简有效值是 width=device-width, initial-scale=1，多一个参数都可能出问题。
viewport 标签必须放在 <head> 最前面，动态插入无效
浏览器解析 HTML 时，<meta name="viewport"> 是最早读取的元信息之一。一旦 layout viewport 已按默认 980px 初始化，后续任何 JS 操作（比如 document.head.appendChild() 或 document.write()）都无法重置它。iOS Safari 和多数安卓 WebView 会直接忽略动态插入的该标签。SSR 渲染漏掉，客户端 JS 补不上。
- 错误做法：
document.querySelector('body').insertAdjacentHTML('afterbegin', '<meta name="viewport" content="...">') - 正确位置：必须硬编码在 HTML 文件的
<head>开始处，越靠前越好 - 多个同名
<meta name="viewport">并存？浏览器只取第一个，其余静默丢弃
别堆参数：width=device-width, initial-scale=1 就够了
加 user-scalable=no 或 maximum-scale=1 看似“防误触”，实则破坏辅助功能，还可能触发 iOS 输入框强制放大 bug；target-densitydpi=device-dpi 是 Android 2.3 遗留物，现代浏览器已废弃。
-
width=device-width：让 CSS 布局宽度匹配设备逻辑像素宽度（如 iPhone 15 是 393px），不是物理像素 -
initial-scale=1：告诉浏览器“别自动缩放标题/段落”，启用 ideal viewport，同时消除 300ms click 延迟 - 删掉
minimum-scale、maximum-scale、user-scalable—— 除非你明确放弃 WCAG 合规性
写了 viewport 还横向滚动或文字过小？真凶往往在 CSS
viewport 只是开关，不解决布局溢出。它能防止浏览器“主动缩放”，但拦不住你写的代码撑破视口。
-
width: 100vw+padding或border→ 实际宽度 > 100%，触发横向滚动 - 某个
<div>写了width: 375px→ 在 Pixel 7（逻辑宽 412px）或 iPad（834px）上直接溢出 -
<img>没设max-width: 100%且没配height: auto→ 图片原始尺寸撑开父容器 - 全局兜底建议：
img, video, table { max-width: 100%; height: auto; }
为什么加了 viewport 还有点击延迟？大概率是值写错了
300ms 延迟本质是浏览器等双击缩放信号。只有 width=device-width, initial-scale=1 这组组合才能明确激活 ideal viewport 并关闭等待逻辑。缺一不可。
- 只写
width=device-width？iOS 仍可能对文本块做自动缩放，click 延迟照旧 - 只写
initial-scale=1？浏览器不知道该按多宽渲染，layout viewport 仍可能是 980px - 写成
initial-scale=1.0001或带空格如initial-scale= 1？部分安卓 WebView 会降级为默认行为
最容易被忽略的是：viewport 解决的是“浏览器怎么渲染”，不是“你的 CSS 怎么写”。哪怕只有一行 width: 100vw 搭配 box-sizing: content-box，就足以让整个页面在某些机型上横向溢出——而这个 bug 和 viewport 标签本身是否正确毫无关系。
