web-view中viewport被忽略需用JS动态重写meta标签，先移除旧标签再插入含user-scalable=no的新标签，并在DOMContentLoaded后执行；Android还需通过devicePixelRatio修正缩放误差。
Web-View中viewport被忽略的典型表现
直接在H5页面里写 <meta name="viewport" content="width=device-width, initial-scale=1">，但在微信小程序或UniApp的 web-view 里完全不生效——缩放异常、文字糊成一团、按钮点不到。这不是你CSS写错了，而是 web-view 的渲染层压根没把这行meta当回事。iOS和Android底层WebView对meta的解析策略不同，尤其Android部分厂商（如华为、小米）会强制覆盖或忽略初始viewport设置。
必须用JS注入动态重写viewport标签
不能依赖HTML静态声明，得在H5页面加载后，用脚本强行替换或新增viewport meta。关键不是“加”，而是“换”——因为原生WebView可能已插入一个错误的meta节点。
- 先查有没有已存在的viewport meta：
document.querySelector('meta[name="viewport"]') - 有就remove，再create新节点；没有就直接create
- content值要带
user-scalable=no，否则iOS下双击放大仍会触发错位 - 务必在
DOMContentLoaded后执行，但早于图片/字体加载（避免重绘抖动）
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setViewport);
} else {
setViewport();
}
function setViewport() {
const meta = document.querySelector('meta[name="viewport"]');
if (meta) meta.remove();
const newMeta = document.createElement('meta');
newMeta.name = 'viewport';
newMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
document.head.appendChild(newMeta);
}Android上还需补一手设备像素比适配
仅改viewport不够。很多Android WebView（尤其是系统级WebView）会把CSS像素映射成错误的物理像素，导致实际宽度比预期窄20%～30%。这时得靠JS读取 window.devicePixelRatio，动态调整body宽度和缩放比例。
- 不要用
transform: scale()全局缩放，会破坏点击坐标和fixed定位 - 推荐方案：给
加style="font-size: calc(100vw / 375 * 100);"（按iPhone 6基准），再让所有rem基于此计算 - 更稳妥的做法是：用JS获取
screen.width和window.innerWidth差值，反推缩放误差，然后修正根元素fontSize
UniApp里注入JS的坑：时机与作用域隔离
UniApp的 web-view 不允许直接在Vue组件里用 eval 或内联script注入JS。必须走 injectJS 或通过 webview.setStyle 配合 evaluateJavaScript 执行。
立即学习“前端免费学习笔记（深入）”；
- 在
onReady生命周期里获取webview实例，别在onLoad就调——此时webview还没初始化完 - Android需延迟200ms再执行JS注入，否则
document可能为空 - iOS下
evaluateJavaScript返回值是字符串，无法直接返回对象，要用JSON.stringify包一层 - 别在注入脚本里用ES6+语法（如箭头函数），低版本WebView不支持
最易被忽略的是：注入的JS运行在H5页面上下文，但无法访问UniApp的 this 或任何Vue实例数据——它就是一段纯客户端执行的脚本，跟你的Vue逻辑完全隔开。
