移动端 srcset 降级必须确保 sizes 精准匹配 CSS 渲染宽度，否则小屏加载大图、高 DPR 模糊、fallback 失效；sizes 需计算 padding/max-width 等实际占用，且 src 必须为真实可访问的降级图。

移动优先的 srcset 降级不是“写完就跑”，而是必须让浏览器在 320px 视口下也能精准选图——否则小屏加载大图、高 DPR 设备拉伸模糊、甚至 fallback 失效，全是因为 sizes 没对齐真实布局宽度。

为什么移动端 srcset 总是加载错图

常见现象：iPhone 上明明只显示 320px 宽的图，Network 却加载了 1200w 的大图；或者 Android 高刷机上图片发虚。根本原因不是 srcset 写错了，而是浏览器按 sizes 计算“这张图该占多宽”时，得到的结果和实际 CSS 渲染宽度不一致。

• sizes 里写的 (max-width: 768px) 100vw 看似合理，但如果父容器被 max-width: 600px 限制，浏览器仍会按 100vw（即 390px）去匹配 srcset 中的 400w，结果选中了本该给桌面用的图
• 没写 sizes 时，Chrome 默认 fallback 到 100vw，Safari 可能直接忽略整条 srcset，退化为只读 src
• srcset 中的 w 描述符（如 320w）必须和原图真实像素宽度完全一致；写成 300w 或 320（漏掉 w）都会导致匹配失败

sizes 怎么写才真正匹配移动端布局

不能靠估算，得从 CSS 实际渲染出发。比如一个卡片内图片在手机竖屏下固定占满容器，而容器本身有 padding 和 max-width 限制，sizes 就得把所有这些“挤占空间”的因素都算进去。

• 若容器 CSS 是 width: 100%; max-width: 340px; padding: 0 16px;，那么图片可用宽度 ≈ 340px - 32px = 308px，sizes 应写为 sizes="(max-width: 768px) 308px, 50vw"
• 全宽 banner 图，但 iOS Safari 横屏下 100vw 会出 bug，稳妥写法是 sizes="100vw, 100vh"（逗号分隔多个候选值，浏览器取第一个有效值）
• 使用 rem 布局时，别把 sizes 写成 20rem——它只接受 px、vw、vh 或媒体查询，rem 会被忽略

移动端 fallback 必须靠 src，不是靠 JS 注入

IE11、旧版安卓 WebView、甚至某些定制 ROM 浏览器，会直接跳过 srcset 和 sizes，只加载 src 属性指向的图。这不是兼容性“补丁”，而是它们的解析器根本不认识这两个属性。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• src 必须是一个真实可访问的地址，不能是 "#"、空字符串或相对路径错误（如 ../img/logo.jpg 在深层路由下 404）
• 不要为了“省流量”把 src 指向一张 1px 占位图再靠 JS 替换——首次加载失败后触发 error，但很多老环境连 error 事件都不抛
• 如果项目已全面放弃 IE，src 可设为最小尺寸的 WebP（如 logo-320w.webp），现代浏览器会优先走 srcset，老浏览器就老实加载它

验证是否真生效：别信预览，要禁缓存看 Network

在 Chrome DevTools 中切 User Agent 到 iPhone 14 并不等于真实行为——缓存、Service Worker、CDN 边缘节点都可能干扰判断。唯一可信的是禁用缓存后观察 Network 面板的实际请求。

• 打开 DevTools → Network → 勾选 Disable cache → 刷新页面
• 右键图片资源 → Copy → Copy response → 粘贴到文本编辑器里确认返回的图片尺寸是否匹配你预期的那张（比如 320×180 而不是 1200×675）
• 如果始终加载同一张图，检查 sizes 是否被 CSS transform、scale() 或 iframe 嵌套影响了视口计算——这些都会让浏览器误判布局宽度

最易被忽略的一点：srcset 和 sizes 是协同工作的，单独调优任一者都没用；而移动端的“真实宽度”永远由 CSS 渲染结果决定，不是由设计稿标注或 JS clientWidth 返回值决定。