viewport标签必须写在<head>中且越靠前越好，动态插入或放于<body>中无效；最简有效值为width=device-width, initial-scale=1，缺一不可，否则移动端页面将出现文字过小、横向溢出、点击延迟等问题。
没加 <meta name="viewport">，页面在手机上基本等于“半残”：文字小得要凑近看、横向滚动停不下来、按钮点击有明显延迟——这不是 CSS 写得不好，是浏览器压根没进入移动渲染模式。
viewport 标签必须写在 <head> 里且不能动态插入
它不是普通 meta 标签，而是浏览器解析 HTML 时最早读取的元信息之一。一旦错过初始渲染时机，补救无效。
- 用
document.write或appendChild动态插入<meta name="viewport">，iOS Safari 和多数安卓 WebView 直接忽略 - SSR 渲染漏掉该标签，后续任何 JS 都无法“唤醒”响应式行为
- 多个
<meta name="viewport">并存时，浏览器只认第一个，后面的静默丢弃
最简有效 content 值是 width=device-width, initial-scale=1
别一上来就堆参数。很多项目加了 user-scalable=no 或 maximum-scale=1，结果用户双指缩放被禁，辅助功能失效，还可能触发 iOS 的“强制放大输入框” bug。
-
width=device-width让布局宽度匹配设备逻辑宽度（不是物理像素），这是响应式的基础 -
initial-scale=1确保以 1:1 比例渲染，避免 iOS 自动缩放标题/段落 - 去掉
minimum-scale、maximum-scale，除非你明确知道 WCAG 辅助要求已被豁免 -
target-densitydpi=device-dpi是 Android 2.3 时代的遗物，现代浏览器已废弃
写了 viewport 还被缩放或横向滚动？大概率是布局溢出
viewport 设置再准，也救不了破坏流式布局的代码。常见真凶：
-
width: 100vw+padding或border→ 实际宽度超 100% - 某个
<div>写了固定width: 375px→ 在 Pixel 7 或 iPad 上直接溢出 -
<img>没设max-width: 100%且没配height: auto→ 撑开父容器 - 用了
transform: scale()或某些 UI 库内部重置 layout viewport
全局兜底样式建议：img, video, table { max-width: 100%; height: auto; }
viewport 能消除 300ms 点击延迟，但仅限于合法值
移动端 click 事件滞后不是 JS 性能问题，是浏览器历史机制：默认 layout viewport 宽 980px，为支持双击缩放，touchend 后会等 300–350ms 才派发 click。
-
width=device-width, initial-scale=1明确告诉浏览器“本页已适配”，从而启用 ideal viewport 并立即触发 click - 移除该标签 → 点击按钮可测出明显卡顿；加回 → 延迟即刻消失
- Chrome 自 2013 年起默认启用此优化，但前提是标签存在且 content 合法（比如不能是
width=375）
高 DPR 设备（如 iPhone 14 Pro）下字体模糊、1px 边框发虚，不是 viewport 能解决的——那是 CSS 单位和媒体查询的事，viewport 只管“让页面进来”。
