CSS怎么在Web-View中引入外部H5的样式适配_通过注入JS脚本动态调整viewport-css教程-PHP中文网

web-view中viewport被忽略需用JS动态重写meta标签，先移除旧标签再插入含user-scalable=no的新标签，并在DOMContentLoaded后执行；Android还需通过devicePixelRatio修正缩放误差。

css怎么在web-view中引入外部h5的样式适配_通过注入js脚本动态调整viewport

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);
}