HTML移动优先srcset降级适配教程-html教程-PHP中文网

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

html移动优先srcset降级适配教程

移动优先的 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 返回值决定。