viewport标签未生效会导致所有响应式逻辑失效，因其缺失或错误配置会使浏览器按980px桌面宽度解析dom，造成srcset/sizes计算错乱、图片撑破屏幕、横向滚动及缩放失效。
viewport 标签没生效，后续所有响应式逻辑都白搭
如果 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没写对或没放在 最顶部，浏览器会按桌面宽度（通常是 980px）解析 DOM，srcset 和 sizes 的计算全部错乱——图片撑破屏幕、横向滚动、缩放失效都是典型症状。
常见错误包括：
- 写在
里或动态插入 - 内容写成
width=375或加了user-scalable=no - SSR 渲染漏掉这行，真机加载时已锁定布局宽度
- 同一页面重复声明两次
验证方式：Chrome DevTools 切手机模式 → 右键“查看网页源代码”，确认该标签在 开头附近，且仅出现一次。
只写 max-width: 100% + height: auto 是自欺欺人
这行 CSS 只解决“不溢出容器”，但手机照样会下载 2MB 的桌面图，缩到 375px 宽显示——像素全下了，带宽白耗，首屏卡顿，4G 用户等三秒只看到 30KB 有效信息。
真正节省带宽靠的是浏览器资源选择机制，不是 CSS 拉伸：
-
srcset提供多尺寸图源，但必须配sizes，否则浏览器不知道该选哪张 -
sizes是字符串，不是 CSS，不支持calc()，但支持媒体查询语法：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 如果图片在栅格中占 1/3 宽，且断点从 768px 开始，
sizes就该是"(max-width: 768px) 100vw, 33.33vw"，不是硬写100vw - 混用
480w和2x描述符？浏览器直接忽略整个srcset，退化为只加载src
<picture></picture> 中 <source></source> 的 media 属性写错，浏览器静默跳过
<source></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。
父容器没设宽，max-width: 100% 就失效
max-width: 100% 的 “100%” 是相对于父容器计算的。如果父 <div> 没设宽（比如空 div、未设 <code>width 或 flex 项未定义主轴尺寸），那这个百分比就没参照物，图片照样溢出。
常见场景：
- 文章正文里直接插
<img>，但外层<section></section>没设max-width或width - Flex 容器里图片缩不进去？
min-width: 0是隐藏开关 - 某一层父元素用了
display: inline或float，让宽度计算失效 —— 这时候加个display: block到<img>上，往往比调布局更快见效
真正容易被忽略的是：当图片嵌套在多个层级容器中时，某一层父元素的 display: inline 或 float 可能让宽度计算失效 —— 这时候加个 display: block 到 <img> 上，往往比调布局更快见效。
