移动端图片降级由浏览器在HTML解析阶段自动完成，无需JS干预；关键在于src必须存在作兜底，srcset描述符需统一用w单位，sizes须精准匹配实际渲染宽度，否则将导致大图滥用或选图失准。
移动端 srcset 降级不是靠 JS 判断设备再换图，而是浏览器在 HTML 解析阶段就按规则选源——只要 src 存在、srcset 描述符写对、sizes 匹配真实渲染宽度，iOS Safari 和 Android Chrome 都能自动 fallback 到 src，IE 或老 WebView 也照常加载。
srcset + sizes 在移动端不生效的常见原因
你写了 srcset 却发现手机始终加载最大图，或小屏下仍请求 1200w 图片，大概率是以下问题之一：
-
sizes没写，或写成固定值如"100vw"：浏览器会默认用视口宽度估算，小屏手机也会去拿大图 -
srcset里混用了w和x描述符（比如"a.jpg 400w, b.jpg 2x"）：整条srcset被忽略，退化为只读src -
sizes媒体查询和实际 CSS 布局不一致：例如写"(max-width: 768px) 100vw"，但容器被max-width: 600px限制，浏览器算出的目标尺寸偏大，选图失准 - 没设
width/height或aspect-ratio：图片加载前无占位，加载后撑开布局，CLS 偏高，用户感知就是“闪一下”
移动端必须保留 src 属性作兜底
所有不支持 srcset 的环境（iOS Safari srcset 和 sizes，只加载 src 指向的资源。这不是可选项，是保命线。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
src必须指向一个真实可访问的图，不能是空字符串、"#"或 404 路径 - 推荐用 CDN 托管的 800w 主图或 LQIP 模糊图，体积控制在 5–10KB 内，兼顾加载速度与视觉可用性
- 如果项目需兼容 IE11，
src还得是 JPG/PNG 格式；WebP/AVIF 只能放srcset里供现代浏览器选
如何验证 srcset 是否真被移动端浏览器采纳
别靠肉眼猜，用 DevTools 看真实加载行为：
- 在 Chrome 或 Safari 的 Network 面板中勾选
Disable cache，刷新页面 - 找到对应图片请求，右键 →
Copy→Copy response，粘贴看返回图的实际像素宽高 - 对比
srcset中哪个描述符（如320w）和返回图宽度一致，就能确认浏览器是否按预期选源 - 在 iOS Safari 上，可连 Mac 用 Web Inspector 查看
img.currentSrc值，它反映最终生效的 URL
移动端图片降级最容易被忽略的细节
真正卡住上线的，往往不是语法错误，而是这些隐性约束：
-
srcset中每个图的真实宽度必须和描述符严格一致：写"photo-400.jpg 400w"，但图实际是 380px 宽，浏览器计算目标尺寸时会偏差，可能错选下一档 -
sizes必须反映“这张图在页面中**实际渲染的宽度**”，不是父容器 CSS 宽度，更不是设计稿标注——它取决于最终 layout flow - 没有
loading="lazy"的非首屏图，在弱网下可能阻塞解析；但加了之后若src不可用，就会白屏——所以src的可靠性比懒加载优先级更高 - 用
object-fit或background-image替代img标签时，srcset失效：只有原生img支持该属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
