viewport标签未正确放置或配置会导致响应式图片失效；srcset与sizes必须精确匹配布局宽度；picture的media属性需合法完整；CDN URL参数须与描述符一致且大小写敏感。
viewport 标签没生效，后续所有响应式图片都白搭
如果 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没写对或没放在 <head> 最顶部，浏览器会按桌面宽度（通常是 980px）解析 DOM，srcset 和 sizes 计算全部错乱——图片撑破屏幕、横向滚动、缩放失效都是典型症状。
常见错误包括：
- 写在 <body> 里或动态插入
- 内容写成 width=375 或加了 user-scalable=no
- SSR 渲染漏掉这行，真机加载时已锁定布局宽度
- 同一页面重复声明两次
验证方式：Chrome DevTools 切手机模式 → 右键“查看网页源代码”，确认该标签在 <head> 开头附近，且仅出现一次。
srcset + sizes 配对错误导致浏览器退化为只加载 src
sizes 是字符串，不是 CSS，也不支持 calc()；它必须覆盖所有视口宽度，且每段值要和真实 DOM 渲染宽度一致。写错就等于没写，浏览器直接忽略 srcset，只加载 src。
典型问题：
- sizes="(max-width: 768px) 100vw"，但实际该图在 768px 断点下只占容器 1/3 宽 → 浏览器按 100vw 算，选了过大图片
- sizes="(max-width: 768px) 100vw, 33vw" 缺少中间断点，最后一项没带媒体条件 → 整个属性被忽略
- Safari 12.1 之前不支持 w 描述符，sizes 再准也无效，得靠 <picture> + 2x 回退
正确写法示例：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" —— 三段覆盖全部视口，且每段宽度与布局真实占用一致。
立即学习“前端免费学习笔记（深入）”；
<picture> 中 <source> 的 media 属性写错，浏览器静默跳过
<source> 的 media 必须是完整合法的 CSS 媒体查询，括号不能省、关键字不能漏。浏览器不报错，但请求根本不会发出去——Network 面板里看不到对应请求，直接 fallback 到 <img>。
常见错误：
- media="max-width: 768px"（缺括号）
- media="768px"（非媒体查询）
- media="screen and (max-width: 768px)"（冗余，可能触发兼容性降级）
- 断点重叠：media="(max-width: 768px)" 和 media="(min-width: 768px)" 在 768px 宽度下同时命中，但只有前者生效
推荐写法：
- 用开区间避免临界冲突：max-width: 767px → min-width: 768px → min-width: 1024px
- 平板显式限定范围：media="(min-width: 768px) and (max-width: 1023px)"
CDN 图片 URL 与 srcset 描述符不匹配，浏览器跳过整个条目
浏览器靠 srcset 中的 480w、800w 这类描述符，结合 sizes 计算出“当前需要多宽的图”，再从列表里挑最接近但不小于该宽度的候选源。如果 CDN URL 里的 w= 参数和描述符对不上，比如写了 https://cdn.com/photo.jpg?w=800 480w，浏览器就会跳过这个条目。
实操要点：
- 每个 srcset 条目用独立 CDN URL，且 w= 参数值必须等于其后的 xxxw 描述符（如 ?w=1200 1200w）
- 避免用同一张图拼多个 w 描述符（如 ?w=800 480w, ?w=800 800w），只会重复请求同一张图
- Cloudflare Images / Cloudinary / Imgix 等主流 CDN 支持路径式参数（如 /w_800,h_450,c_cover/），比 query 更稳定，优先选用
- 老 iOS Safari 可能截断含多个 & 的 URL，必要时用 %26 编码，但需确认 CDN 后端能解
CDN 裁剪参数大小写敏感、缺一不可：比如 fit=cover 不通用，Cloudinary 要 c_fill，Imgix 要 fit=crop；漏掉 q=80 可能导致体积暴涨。
真正容易被忽略的是 sizes 与真实布局宽度的一致性——它不是“大概估一个”，而是必须和 CSS 中该图片最终渲染出的宽度完全对齐。哪怕差 1vw，浏览器选图逻辑就偏移；而 <source> 的 media 断点，也必须和你实际用的 CSS 媒体查询断点严格一致，否则艺术方向切换就失效。
