第三方HTML在WebView或小程序中错位、字体糊、图片拉伸、交互失灵，根本原因是原始HTML缺乏移动端适配基因，如固定像素宽高、缺失viewport、内联样式、table布局等；解决需从源头轻量预处理：插入viewport meta、移除script/iframe等危险标签、重写宽高为auto并加max-width:100%、table转flex，而非强行覆盖CSS。
第三方 HTML 内容直接扔进 WebView 或小程序容器里，大概率会错位、字体糊、图片拉伸、交互失灵——这不是样式没写好，而是原始 HTML 本身缺乏移动端适配基因。解决它不靠“强行覆盖 CSS”，而要从内容源头做轻量级重塑。
为什么直接 loadHTML 会崩
老系统导出的 HTML 常含固定像素宽高（width="600"）、内联 style、绝对定位、未声明 <meta name="viewport">，甚至混用 table 布局。WebView 默认按桌面模式渲染，不会自动缩放或重排。
- 安卓 WebView 默认使用
WebSettings.LOAD_DEFAULT缓存策略，可能加载过期的旧版 CSS - iOS WKWebView 对
document.write和同步脚本更敏感，容易阻塞渲染 - 小程序 rich-text 组件不支持
iframe、script、style标签，直接丢进去就丢弃
用 DOMParser 做轻量预处理
在注入前对 HTML 字符串做一次解析重构，比全局 CSS hack 更可控、副作用更小。
- 插入 viewport：
doc.head.appendChild(viewportMeta)，其中viewportMeta是<meta name="viewport" content="width=device-width,initial-scale=1.0"> - 移除危险标签：
doc.body.querySelectorAll('script, iframe, object, embed').forEach(el => el.remove()) - 重写内联 width/height：
el.style.width = 'auto'; el.style.height = 'auto'，再加max-width: 100%到 img/video - 把
<table>替换为语义化 div + flex：仅处理带border或cellspacing的 table，避免误伤布局表
示例片段：
立即学习“前端免费学习笔记（深入）”；
const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, 'text/html'); // ... 处理逻辑 return new XMLSerializer().serializeToString(doc);
WebView 加载时绕过默认缩放陷阱
安卓 WebView 即使有 viewport，仍可能因 useWideViewPort 和 loadWithOverviewMode 组合导致文字过小或横向滚动。
- 必须同时启用：
settings.setUseWideViewPort(true)+settings.setLoadWithOverviewMode(true) - 禁用双指缩放但保留单指滚动：
settings.setBuiltInZoomControls(false)，而非setSupportZoom(false)（后者会禁用所有手势） - iOS WKWebView 需额外设置：
webView.configuration.defaultWebpagePreferences.allowsContentJavaScript = true，否则某些自适应脚本不执行
小程序里用 mp-html 替代 rich-text 的硬门槛
mp-html 不是万能胶水——它只解析 HTML 字符串，不执行 JS，也不加载远程 CSS。很多“适配失败”其实卡在配置和内容结构上。
- 必须传入纯字符串，不能是
DOMElement或DocumentFragment；this.setData({ html: processedHtml })才生效 - 外部 CSS 要转成内联 style 或通过
customStyle注入，<link rel="stylesheet">会被忽略 - 图片路径需绝对化：相对路径如
./img/logo.png在小程序域下 404，要用https://your-cdn.com/img/logo.png - 慎用
lazy-load：mp-html 的懒加载依赖IntersectionObserver，部分低端 Android 微信版本不支持，建议 fallback 到data-src+ 手动监听
真正难的不是让 HTML 显示出来，而是判断哪些节点该删、哪些样式该提、哪些脚本该降级为静态结构——这需要结合业务语义，没法全自动。
