标签需真机多端验证，因devtools无法模拟真实资源加载、解码及网络条件；必须覆盖ios/safari、android/chrome、windows/edge三类设备组合，严格校验media断点、srcset匹配、sizes计算及fallback兜底逻辑。
<picture></picture> 不是写完就跑通的，真机上一测，常发现某张图没加载、某台设备白屏、或者 WebP 图片在旧浏览器里直接不显示——这些问题必须在多终端测试阶段暴露并修正。
Chrome DevTools 里的设备模拟只能看布局，不能验资源加载
开发者工具的“设备模式”能快速验证 media 断点是否触发、<source></source> 是否被选中，但它不会真实发起图片请求，也不模拟网络条件或解码能力。比如：
-
type="image/avif"在 Chrome 120+ 正常，但在 Safari 16.6 或 Firefox 115 里会被跳过，最终 fallback 到<img>的 JPG —— 这个行为只有真机或 BrowserStack 才能确认 -
sizes="(max-width: 768px) 100vw"写成(max-width:768px)（少空格）在旧版 Edge 里整条失效，srcset退化为只加载src，但 DevTools 控制台不报错 - 4G 网络下首屏图片加载慢？DevTools 的 “Throttling” 只影响 JS/CSS 加载节奏，对
<source></source>的资源选择逻辑无干预
真机测试必须覆盖三类关键设备组合
不是“随便拿台 iPhone 看一眼”就行，要聚焦资源加载链路是否完整：
- iOS 17+ Safari + 横竖屏切换：验证
orientation媒体查询是否实时生效，<source media="(orientation: landscape)"></source>是否在旋转后立刻换图（注意：Safari 对orientation的触发有延迟，需等 layout 重排） - Android 14 Chrome + 低分辨率屏（如 720×1280）：检查
srcset中的480w描述符是否被选中，而不是误加载1200w版本（可通过 Network 面板过滤img类型确认） - Windows 10 + Edge 119（Chromium 内核）+ 200% 缩放：验证
2x描述符是否触发，同时确认<picture></picture>外层容器未因缩放导致max-width: 100%失效（常见于 Flex 容器缺min-width: 0）
<picture></picture> 的 fallback 机制必须手动验证
浏览器按顺序匹配 <source></source>，一旦命中即停止；没命中才用 <img>。但这个“没命中”容易被误解：
- 把
media="(min-width: 600px)"和media="(max-width: 599px)"并列写，中间没有覆盖 599.5px 这种情况——实际不会出问题，因为媒体查询是离散判断，但若断点值和 CSS 布局断点不一致（比如 CSS 用768px，<source></source>写767px），就会出现“布局已切为移动端，但图片还在加载桌面版”的错位 -
<source type="image/webp" srcset="a.webp"><img src="a.jpg" alt=""></source>是安全的，但若漏掉<img>，整个<picture></picture>渲染为空白，且控制台无警告 - 在禁用 JS 的环境（如部分阅读模式、低配设备）下，
<picture></picture>仍可工作，但若依赖 JS 动态插入<picture></picture>，则首次渲染时<img>可能已被浏览器预加载，造成重复请求
最易被忽略的一点：<picture></picture> 的语义前提是“不同设备需要不同内容”，而不是“单纯为了省流量”。如果所有 <source></source> 只是同一张图的不同尺寸，却没配 sizes，浏览器无法判断视口内图片占多少空间，大概率会选错资源——这时候不如直接用 <img srcset> 更轻量、更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
