viewport标签错误会导致所有响应式图片失效；它必须是<head>中首个标签且唯一，否则浏览器按980px解析布局，srcset/sizes计算全错，图片撑破容器或加载模糊。
viewport 标签没写对，后续所有响应式图片逻辑都会失效。 浏览器按桌面宽度（通常是 980px）解析布局，srcset 和 sizes 的计算全错——图片撑破容器、横向滚动、加载超大图却显示模糊，都是这个根源。
viewport 必须顶格且唯一
它得是 <head> 里的第一个标签，前面不能有任何字符（包括空格、注释、BOM）。否则 IE/Edge 直接进 Quirks Mode，<picture> 和 srcset 全部被忽略。
- 错误写法：
<!-- 注释 --><meta name="viewport" content="width=device-width, initial-scale=1.0">或 PHP 输出前有空白 - 验证方式：Chrome DevTools → Elements → 看顶部是否显示
Standards；右键“查看网页源代码”，确认该标签在<head>开头且仅出现一次 - VS Code 右下角编码必须是
UTF-8 without BOM，不是 “UTF-8”
srcset + sizes 配对必须严格匹配真实渲染宽度
sizes 是字符串，不是 CSS，也不支持 calc()。浏览器用它来估算图片在页面中实际占多宽，再从 srcset 里选最接近的资源。写错就等于没写，浏览器直接退化到只加载 src。
- 常见错误：
sizes="(max-width: 768px) 100vw"，但图在 768px 断点下只占容器 1/3 宽 → 浏览器按 100vw 算，选了 3 倍大的图 - 语法错误：
sizes="(max-width: 768px) 100vw, 33vw"缺少最后一段的媒体条件 → 整个sizes被静默忽略 - 正确示例：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"—— 覆盖全部视口，每段值与 DOM 渲染后的真实占用宽度一致
<picture> 中 <source> 的 media 属性必须是合法 CSS 媒体查询
浏览器不报错，但会静默跳过非法 <source>，Network 面板里根本看不到对应请求，直接 fallback 到 <img> 的 src。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
media="max-width: 768px"（缺括号）、media="768px"（非媒体查询）、media="screen and (max-width: 768px)"（冗余可能触发兼容性降级） - 断点重叠风险：
media="(max-width: 768px)"和media="(min-width: 768px)"在 768px 宽度下同时命中，但只有前者生效，后者被丢弃 - 推荐写法：用开区间避免临界冲突，例如
media="(max-width: 767px)"→media="(min-width: 768px) and (max-width: 1023px)"→media="(min-width: 1024px)"
旧浏览器兜底要分层处理，不能只靠一个 polyfill
Safari 12.1 之前不支持 w 描述符；IE11 不识别 <picture>；CDN 参数大小写敏感导致 URL 匹配失败——这些都不是加个 html5shiv 就能解决的。
- IE8–11：必须手动加
main, section, article, aside, nav, header, footer { display: block; }，否则语义标签渲染为 inline，布局塌陷 - Safari 12.0 及更早：
srcset+w失效，得靠<picture>+2x回退或 JS 检测 - CDN 场景：确保
srcset中的 URL 参数（如?w=320）与后端描述符完全一致，大小写都不能错
最容易被忽略的是：viewport 错误会导致整套响应式图片机制失效，而这个错误在桌面浏览器上几乎看不出来——只有真机或模拟器切到手机模式时，才会暴露图片错位、缩放异常、横向滚动等现象。别等上线后才查。
