安卓WebView图片不自适应是viewport未生效、父容器无min-width:0约束、WebView LayoutAlgorithm未设为SINGLE_COLUMN三重失效所致；须静态置顶viewport标签、启用JavaScript与SINGLE_COLUMN模式、父容器显式设min-width:0，并配合srcset/sizes资源选择。
HTML图片在安卓 WebView 里不自适应，根本不是图片写法问题，而是 viewport 没生效 + 父容器没约束 + WebView 设置没对齐三重失效叠加。
viewport 标签必须静态写在
最顶部
安卓 WebView（尤其旧版）对 极其敏感：动态插入、重复声明、写在 CSS 后面、漏掉 initial-scale=1.0，都会导致它直接忽略。一旦失效，WebView 就按默认 980px 渲染，max-width: 100% 失去参照基准，图片必然撑破屏幕。
- 必须写成：
，且放在第一行 - 别加
user-scalable=no或maximum-scale=1.0—— 不仅影响可访问性，部分 Android WebView（如系统浏览器内核）会因此拒绝应用缩放逻辑 - Vue/React SSR 渲染时务必确保服务端已吐出该标签，不能靠 JS 动态注入
WebView 的 LayoutAlgorithm 和 JavaScript 必须显式启用
Android 4.4+ WebView 默认用 WebSettings.LayoutAlgorithm.NORMAL，它会把 HTML 当桌面页面渲染，无视 width=device-width。必须手动切到 SINGLE_COLUMN 模式，才能强制让块级元素（包括
- 设置代码必须包含：
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN) -
webSettings.setJavaScriptEnabled(true)不可省 —— 后续 JS 注入或动态调整依赖它 -
webSettings.setSupportZoom(true)和setBuiltInZoomControls(true)建议开启，否则用户双指缩放失效，小图看不清
img 样式要配合父容器 min-width: 0 才真正生效
即使写了 img { max-width: 100%; height: auto; }，在安卓 WebView 的 Flex/Grid 容器中仍可能失效 —— 因为 Flex 子项默认 min-width: auto，会阻止图片收缩。这不是 bug，是规范行为。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 关键修复不是改
min-width: 0 - 若父容器是
display: flex或display: grid，且图片是子项之一，必须显式设置该父容器的min-width: 0 - 避免在图片上写行内
style="width: 500px"，它会覆盖max-width: 100%
srcset 和 sizes 不配安卓照样白搭
只靠 CSS 缩放，安卓 WebView 仍会加载原始大图（比如后台返回的 2000px 宽图），导致首屏卡顿、流量浪费。真适配得靠资源选择机制。
-
srcset必须用w单位（如"photo-375w.jpg 375w"），不能混用x描述符 -
sizes必须和实际布局占位一致：如果图片在小屏占满视口，就写sizes="(max-width: 480px) 100vw, 50vw"；写成sizes="100vw"会让所有安卓机都选最大图 - 旧版 Android WebView（如 4.4）不支持
srcset+sizes，优先用这个组合
最常被忽略的一点：安卓 WebView 的 LayoutAlgorithm 是全局开关，一旦设错，后面所有 CSS 和 JS 都救不回来；而 min-width: 0 这个属性藏在父容器上，调试时根本不会盯着它看 —— 它俩一错，图片就永远“看起来像适配了”，实则只是被拉伸糊掉而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
