必须用浏览器DevTools Network面板抓包验证srcset是否生效，通过content-length和文件名确认加载的w图尺寸，而非依赖视觉判断。
怎么确认手机端浏览器真的用了 srcset 里的 w 图片
光写 srcset 和 sizes 不代表它生效了。手机端是否加载了你指定的 400w/800w 图，得靠浏览器 DevTools 真实抓包验证，不能靠“看起来清晰”或“缩放正常”来判断。
- 在 Chrome 或 Edge 的手机模拟器里打开页面，右键 → “检查”，切到 Network 标签页，刷新页面
- 过滤
img类型，找到对应图片请求，点开看Response Headers里的content-length（字节数）和文件名（比如photo-400w.jpg） - 对比不同视口宽度下的请求：把模拟器从 375px 拉到 768px，再拉到 1200px，观察加载的是不是
400w→800w→1200w文件 - 注意：Safari 技术预览版或 iOS 真机需用 macOS 的 Web Inspector 连接调试，直接在 iPhone 上看不到 Network 面板
为什么 sizes 写对了但手机还是加载大图
常见原因是 sizes 声明的宽度和实际 CSS 渲染宽度不一致——浏览器信的是 sizes，不是你“以为”的布局宽度。
- 比如父容器写了
max-width: 600px，但sizes写成"100vw"，浏览器会按视口宽度（如 375px）去匹配srcset，结果选了 400w；可如果srcset里最小是 800w，它只能退而求其次加载 800w，哪怕实际只渲染 300px 宽 - 用
getComputedStyle(img).width在控制台查真实渲染宽度，再和sizes表达式比对：例如sizes="(max-width: 768px) 100vw, 50vw"，在 375px 视口下应得 375px，若实际渲染只有 320px，说明父容器有 padding/margin 挤压，sizes就该调小（比如改用(max-width: 768px) 90vw） - Flex 或 Grid 容器中，
img默认min-width: auto，可能撑开容器导致宽度计算失真——加min-width: 0再测
真机测试时 srcset 不生效的三个硬性前提
在线运行环境或真机访问时，srcset + w 描述符完全失效，大概率不是代码写错，而是漏了底层依赖。
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且位置正确（在<head>里），否则sizes中的vw单位会按桌面默认宽度（980px）解析，所有手机都当大屏处理 - 图片路径必须可访问：在线沙箱（如 CodePen）不支持
src="images/photo.jpg"这种相对路径，必须用绝对 URL 或 Data URL，否则浏览器直接 fallback 到src值 - 不要在
<img>上同时写width和heightHTML 属性——它们会覆盖height: auto，导致浏览器无法按比例缩放，进而影响sizes匹配逻辑
怎么用 object-position 配合 srcset 控制手机端焦点
即使 srcset 加载了合适尺寸的图，固定高度容器（比如轮播图卡片）仍可能把人脸裁掉。这时 object-fit 和 object-position 是最后防线。
立即学习“前端免费学习笔记（深入）”；
- 先确保容器有明确宽高：
width: 100%; height: 300px;，再给<img>加style="object-fit: cover; object-position: 50% 20%;" -
object-position: 50% 20%表示以图片顶部往下 20% 处为垂直中心点，适合人像居上；避免用top这类关键词，iOS Safari 对它的支持不稳定 - 配合媒体查询动态调参：
@media (max-width: 480px) { img { object-position: 50% 15%; } }，小屏时进一步上移焦点，防止下巴被裁 - 注意：这个属性只对
object-fit: cover或contain生效，fill模式下无效
sizes 表达式和实际渲染宽度之间的毫厘之差——差 10px，就可能让浏览器跳过你精心准备的 400w 图，硬选 800w。别信感觉，抓包看字节。 
