根本原因是viewport元标签不完整或参数冲突，必须同时设置width=device-width和initial-scale=1.0，避免使用已废弃的minimum-scale、maximum-scale及user-scalable=0，且需置于<head>最顶部以防被覆盖。
为什么 viewport 元标签加了但页面还是被缩放？
多数情况不是没加，而是加得不完整或参数冲突。iOS Safari 和 Android Chrome 对 viewport 的解析有细微差异，尤其当页面存在内联样式、动态插入的 <meta> 或第三方 SDK 覆盖时，initial-scale=1.0 可能被忽略。
常见错误现象：text-size-adjust: auto 导致字体被强制放大；用户双击后页面意外缩放；横屏时宽度计算异常；某些安卓 WebView 忽略 user-scalable=no 但实际仍可 pinch-zoom。
- 必须同时设置
width=device-width和initial-scale=1.0，缺一不可 - 避免使用
maximum-scale或minimum-scale，它们在 iOS 10+ 已被部分禁用，且会干扰辅助功能（如系统级字体缩放） - 若页面含
font-size使用rem，确保根元素font-size基于视口宽度而非设备像素比，否则高 DPR 设备上会过小
如何写一个真正生效的 viewport 元标签？
最简健壮写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">。其中 viewport-fit=cover 是为 iPhone X+ 边缘屏幕（notch）预留的兼容项，不影响普通设备。
不要写成：content="width=375"（写死像素值）、content="user-scalable=0"（已废弃，应写 no）、或把多个 <meta> 标签叠在一起（后加载的会覆盖前一个）。
立即学习“前端免费学习笔记（深入）”；
-
width=device-width是关键，它让布局视口宽度等于设备逻辑像素宽度，而非物理像素 - 如果项目需支持微信内置浏览器旧版本（如 v6.5.x），可追加
target-densitydpi=device-dpi（仅 Android WebView 有效，现代已弃用） - 务必把该
<meta>放在<head>最顶部，早于任何 CSS 或 JS，防止渲染过程中被重置
遇到 text-size-adjust 干扰怎么办？
iOS Safari 默认会对小于 16px 的文本做自动放大，这会破坏布局，且不受 viewport 控制。错误表现是：段落文字突然变大，容器撑开，rem 布局错位。
解决方案是显式关闭它，但注意作用域——只关需要精确控制的容器，别全局禁用（影响可访问性）：
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
- 不能写
none，iOS 13+ 已不支持，且会禁用用户系统字体设置 - 若用 Vue/React 动态渲染，确保该样式在首次 render 前已注入，否则首屏仍会闪动放大
- 配合
font-size: 16px的 body 基准值，可基本规避自动调整触发条件
真机调试时发现缩放不一致，该查什么？
不是代码问题，而是环境干扰。微信、QQ、抖音等 App 内置 WebView 会劫持 viewport 行为，尤其在安卓端可能强制注入自己的 meta 标签。
验证方式：用手机浏览器（Chrome/Safari）直接打开链接，对比是否正常。若浏览器正常而 App 内异常，基本可判定是宿主环境干预。
- 微信 JS-SDK 提供
updateAppMessageShareData等接口，但不暴露 viewport 控制权；唯一办法是加白名单提示用户“请在浏览器中打开” - 部分安卓厂商（如华为、小米）定制系统 WebView 会忽略
initial-scale，需配合 JS 检测：if (window.visualViewport?.scale !== 1) { document.documentElement.style.zoom = '1' }（仅作降级） - 切记：CSS 中的
transform: scale()或zoom属性会与 viewport 缩放叠加，导致双重缩放，调试时先全局禁用这类样式
viewport 不是开关，是和设备、系统、宿主环境持续博弈的配置项。最稳的方式永远是：最小化依赖，用 device-width + initial-scale=1.0 打底，再针对具体平台补丁，而不是指望一行 meta 解决所有问题。
