viewport meta 标签必须写在 <head> 里，且不能重复；移动端页面缩放异常八成因此导致，浏览器仅识别首个标签，后续重复者被忽略，且必须紧贴 <title> 后、早于所有资源加载。
viewport meta 标签必须写在 里，且不能重复
移动端页面不显示或缩放异常，八成是 <meta name="viewport"> 没写对位置或写了多个。浏览器只认第一个有效，后面重复的直接忽略。如果用了模板引擎或 CMS，要检查是否父模板和子模板各自插入了一次。
- 必须放在
<head>内，且越靠前越好（最好紧跟<title>） - 常见错误写法：
<meta name="viewport" content="width=device-width">缺少initial-scale=1.0，iOS Safari 会默认以 980px 宽度渲染再缩放，导致文字模糊、点击区域错位 - 不要用 JavaScript 动态插入 —— 页面已开始渲染后补 viewport 失效
content 属性中 width=device-width 是基础，但 initial-scale=1.0 不可省略
只写 width=device-width 看似够用，实际在 iOS 上会触发“双击缩放”逻辑：页面先按设备物理宽度（比如 iPhone 14 的 430px）布局，再自动缩放到视觉宽度（约 980px），导致字体小、按钮难点。加 initial-scale=1.0 才能真正让 CSS 像素和设备独立像素对齐。
- 标准写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁止写
user-scalable=no—— 会屏蔽辅助功能（如视力障碍用户放大文本），部分安卓浏览器也强制忽略该值 -
maximum-scale和minimum-scale同样影响可访问性，除非有强业务约束（如 Kiosk 模式），否则不要设
不要用 target-densitydpi（已废弃，仅旧 Android 4.x 支持）
早期为适配低 DPI 安卓屏写的 target-densitydpi=device-dpi，从 Chrome 32+ 和 WebView 50+ 开始彻底移除。现在还留着它，不仅无效，反而可能干扰现代浏览器的 DPI 感知逻辑。
- 错误示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=device-dpi"> - Android 4.4+、所有 iOS 版本、现代桌面浏览器均无视该参数
- 若项目仍需兼容 Android 4.0–4.3（极少见），应单独判断 UA 注入，而非全局写死
响应式布局失效时，先确认 viewport 是否被 JS 覆盖或 CSP 阻止
有些前端框架（如老版本 Ionic 或自定义脚本）会在运行时重写 <meta name="viewport">，或者内容安全策略（CSP）设置了 default-src 'self' 却没允许 unsafe-inline，导致内联 script 修改 meta 失败 —— 这时看源码里的 viewport 是对的，但 DevTools Elements 面板里已被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome DevTools 的 Elements 面板里右键
<meta name="viewport">→ “Break on” → “Attribute modification”，可捕获篡改时机 - 检查 Network → Doc 请求的响应头是否有
Content-Security-Policy，尤其关注是否含script-src限制 - 用
getComputedStyle(document.documentElement).fontSize辅助验证：若返回值远小于预期（如 12px 而非 16px），大概率是 viewport 未生效导致根元素缩放异常
