解决移动端H5缩放错乱需正确配置viewport：必须同时设置width=device-width和initial-scale=1.0，置于head最顶部；禁用user-scalable=no、maximum-scale=1.0及固定width值；配合max-width:100%、rem/clamp字号、100vw等CSS方案。
要解决移动端 H5 页面缩放错乱问题，关键不是“加了 viewport”，而是“加得对、配得全、放得准”。多数错乱现象——比如文字模糊、点击偏移、横屏内容溢出、双击无反应、媒体查询失效——都源于 viewport 元标签配置不完整或位置错误。
必须同时写对两个核心参数
只写 width=device-width 或只写 initial-scale=1.0 都不行，二者缺一不可：
- width=device-width：让布局视口宽度等于设备当前逻辑像素宽（如 iPhone 15 竖屏是 393px，横屏自动变成 852px），不是物理像素，也不是固定值；
- initial-scale=1.0：强制视觉视口与布局视口等宽，确保 CSS 像素准确映射到设备独立像素（DIP），避免 Safari 自动放大字号导致布局跳动。
单独缺失任一，页面就会先按默认 980px 渲染再缩放，造成模糊、重绘、touch 坐标偏移。
务必放在 head 最顶部，且不能动态插入
这个 标签必须硬编码在 HTML 的 开头，早于所有 CSS、JS 和第三方 SDK：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 和部分 Android WebView 在首次渲染后就忽略后续插入的 viewport 设置；
- 若被微信 JS-SDK、广告脚本或 SSR 框架动态覆盖，实际生效的可能是旧值或默认值；
- 不要用 JavaScript 修改
document.querySelector('meta[name=viewport]').content，它在多数环境无效。
慎用或避免这些高风险参数
以下参数看似“控制更严”，实则易引发兼容性、可访问性与性能问题：
- user-scalable=no：iOS Safari 10+ 已忽略该值，且违反 WCAG 可访问性规范，视力障碍用户无法放大阅读；
- maximum-scale=1.0：会锁死缩放能力，导致横屏时无法适应更宽视口，也干扰系统级字体缩放；
- width=375 / width=414：硬编码像素值，不同设备 DPR、系统字体缩放、横竖屏切换都会让该值失效，轻则横向滚动，重则布局崩塌。
配合 CSS 才算真正落地
viewport 只是起点，还需基础 CSS 支撑：
- 图片加
max-width: 100%; height: auto;，防溢出； - 字号优先用
rem或clamp(14px, 4vw, 18px)，别写死font-size: 16px； - 容器宽度用
100vw、%或媒体查询，避免width: 375px； - 检查
和是否误设overflow: hidden或height: 100%，这会让 iOS Safari 认为“无可缩放内容”，禁用双击缩放。
