标签需真机多端验证，因DevTools无法模拟真实资源加载、解码及网络条件；必须覆盖iOS/Safari、Android/Chrome、Windows/Edge三类设备组合，严格校验media断点、srcset匹配、sizes计算及fallback兜底逻辑。

不是写完就跑通的，真机上一测，常发现某张图没加载、某台设备白屏、或者 WebP 图片在旧浏览器里直接不显示——这些问题必须在多终端测试阶段暴露并修正。

Chrome DevTools 里的设备模拟只能看布局，不能验资源加载

开发者工具的“设备模式”能快速验证 media 断点是否触发、 是否被选中，但它不会真实发起图片请求，也不模拟网络条件或解码能力。比如：

• type="image/avif" 在 Chrome 120+ 正常，但在 Safari 16.6 或 Firefox 115 里会被跳过，最终 fallback 到 的 JPG —— 这个行为只有真机或 BrowserStack 才能确认
• sizes="(max-width: 768px) 100vw" 写成 (max-width:768px)（少空格）在旧版 Edge 里整条失效，srcset 退化为只加载 src，但 DevTools 控制台不报错
• 4G 网络下首屏图片加载慢？DevTools 的 “Throttling” 只影响 JS/CSS 加载节奏，对 的资源选择逻辑无干预

真机测试必须覆盖三类关键设备组合

不是“随便拿台 iPhone 看一眼”就行，要聚焦资源加载链路是否完整：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• iOS 17+ Safari + 横竖屏切换：验证 orientation 媒体查询是否实时生效， 是否在旋转后立刻换图（注意：Safari 对 orientation 的触发有延迟，需等 layout 重排）
• Android 14 Chrome + 低分辨率屏（如 720×1280）：检查 srcset 中的 480w 描述符是否被选中，而不是误加载 1200w 版本（可通过 Network 面板过滤 img 类型确认）
• Windows 10 + Edge 119（Chromium 内核）+ 200% 缩放：验证 2x 描述符是否触发，同时确认 外层容器未因缩放导致 max-width: 100% 失效（常见于 Flex 容器缺 min-width: 0）

的 fallback 机制必须手动验证

浏览器按顺序匹配 ，一旦命中即停止；没命中才用 。但这个“没命中”容易被误解：

• 把 media="(min-width: 600px)" 和 media="(max-width: 599px)" 并列写，中间没有覆盖 599.5px 这种情况——实际不会出问题，因为媒体查询是离散判断，但若断点值和 CSS 布局断点不一致（比如 CSS 用 768px， 写 767px），就会出现“布局已切为移动端，但图片还在加载桌面版”的错位
• 是安全的，但若漏掉 ，整个 渲染为空白，且控制台无警告
• 在禁用 JS 的环境（如部分阅读模式、低配设备）下， 仍可工作，但若依赖 JS 动态插入 ，则首次渲染时 可能已被浏览器预加载，造成重复请求

最易被忽略的一点： 的语义前提是“不同设备需要不同内容”，而不是“单纯为了省流量”。如果所有 只是同一张图的不同尺寸，却没配 sizes，浏览器无法判断视口内图片占多少空间，大概率会选错资源——这时候不如直接用 更轻量、更可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！