viewport meta 标签必须写在 html 的 中且不可动态插入，否则移动端页面不响应、缩放错乱；最简有效值为 width=device-width, initial-scale=1，禁用 user-scalable=no 等限制以保障可访问性。
viewport meta 标签必须写在
移动端页面不响应、缩放错乱，八成是 viewport 没生效。它不是 CSS，也不是 JS 控制的逻辑，而是浏览器解析 HTML 时最早读取的元信息之一——一旦错过初始渲染时机，补救无效。
- 动态用
document.write或appendChild插入<meta name="viewport">，iOS Safari 和部分安卓 WebView 完全忽略 - 服务端渲染（SSR）或静态 HTML 中漏掉该标签，后续任何 JS 都无法“唤醒”响应式行为
- 多个
viewport标签并存时，浏览器只认第一个，后面的被静默丢弃
最简可用的 viewport 值是 width=device-width, initial-scale=1
别一上来就堆参数。很多项目加了 user-scalable=no 或 maximum-scale=1，结果用户双指缩放被禁，辅助功能直接失效，还可能触发 iOS 的“强制放大输入框” bug。
-
width=device-width让布局宽度匹配设备物理像素比（DPR）下的逻辑宽度，这是响应式的基础 -
initial-scale=1确保页面以 1:1 比例渲染，避免 iOS 自动缩放标题/段落 - 去掉
minimum-scale、maximum-scale，除非你明确知道 WCAG 辅助要求已被豁免 - 不要写
target-densitydpi=device-dpi—— 这是 Android 2.3 时代的遗物，现代浏览器已废弃
高 DPR 设备（如 iPhone 14 Pro）下字体模糊？不是 viewport 问题，是 CSS 单位没对齐
viewport 设置再准，如果用 px 写固定字号或边框，遇上 3x 屏就会发虚。这不是 meta 标签能解决的，得靠 CSS 配合。
- 优先用
rem或em，配合根字体大小动态调整（例如 JS 设置document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'） - 图标、分割线等小尺寸元素，避免
1px边框，改用transform: scaleY(0.5)或background-image: linear-gradient()模拟 - 检查是否误用了
device-pixel-ratio媒体查询但没配对应资源（比如 @2x 图片缺失），导致浏览器拉伸低清图
微信内置浏览器、QQ 浏览器等 X5 内核有 viewport 兼容陷阱
X5 内核（腾讯系）对 viewport 的解析比标准 WebKit 更敏感，尤其在混合开发（如 WebView 加载 H5）场景下容易出问题。
立即学习“前端免费学习笔记（深入）”；
- 如果页面嵌在微信中白屏或横向滚动，先检查是否写了
width=1024这类固定值——X5 会强行按该宽度渲染，无视设备实际宽度 - 某些旧版 X5 对
initial-scale小数点后两位支持不稳定，建议统一用1.0而非1.00 - 开启调试：在微信中访问
debugtbs.qq.com启用 TBS 调试，用 Chrome DevTools 连接查看实际生效的 viewport 值（注意看Computed面板里的viewport条目）
viewport 不是万能开关，它只是告诉浏览器“怎么开始画”，后面所有布局、字体、图片适配都得跟上。最容易被忽略的是：改完 meta 标签后，没清空手机浏览器缓存，或者本地开发用 file:// 协议打开——这时候 viewport 根本不生效，连报错都不会有。
