根本原因是viewport缺失或位置错误、sizes与实际布局脱节、Flex/Grid容器未设min-width:0；必须将viewport标签置于head最前，图片加max-width:100%、height:auto和min-width:0，并用sizes匹配真实渲染宽度。
平板设备上图片排版错位、留白异常或模糊，根本原因不是图片没加 max-width: 100%，而是 viewport 缺失、sizes 与真实布局脱节、或 Flex/Grid 容器未重置图片的收缩行为。
viewport 标签缺失或位置错误导致所有响应式失效
没有它，iOS 和 Android 浏览器默认以约 980px 渲染页面，@media 规则压根不触发，srcset 选图逻辑也形同虚设。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>最顶部，且只能出现一次 - 不能写成
width=768或加maximum-scale=1.0，后者会禁用双击缩放，损害可访问性 - 验证方式：Chrome DevTools 切换 iPad Pro 模拟器，Elements 面板中查看
<meta name="viewport">的实际生效宽度，应为 768（竖屏）或 1024（横屏），而非 980
Flex 容器中图片不收缩：漏加 min-width: 0
Flex 默认给子项设 min-width: auto，导致图片卡在原始宽度，哪怕父容器已缩窄——这是平板上图片溢出、侧边栏被挤掉的高频原因。
- 必须同时写：
img { max-width: 100%; height: auto; min-width: 0; } - 仅靠
width: 100%会强制拉伸小图，造成失真；max-width: 100%才允许它比容器小 - 若用 Grid 布局，同样需对
img加min-width: 0，否则auto-fit + minmax()会失效
sizes 值与 CSS 实际渲染宽度不一致，浏览器加载错图
sizes="(max-width: 768px) 100vw" 看似合理，但如果图片在 Flex 容器里只占 50% 宽，浏览器就会误判为需要两倍分辨率资源，白白多下 1MB。
立即学习“前端免费学习笔记（深入）”；
-
sizes是字符串，不是 CSS，不支持calc()，但支持媒体查询语法，例如：sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" - 断点值必须来自你自己的布局：拖动浏览器窗口，观察图片在哪个宽度开始“撑满”或“留白突增”，那个值才是真实断点
- 常见错误：把
sizes写死为"100vw"，或混用w和x单位（如"small.jpg 480w, big.jpg 2x"），浏览器直接忽略整个srcset
折叠屏和平板横竖屏切换时图片比例崩坏
单纯靠 @media (min-width: 768px) 无法覆盖折叠屏外屏（~320–420px）、内屏（~900–1100px）和 iPad 横屏（1024px）的混合场景，容易出现竖屏裁切关键内容、横屏留白严重等问题。
- 优先用
<picture>+<source>处理艺术方向：外屏用竖构图特写，内屏/横屏用横构图全景 -
<source>的media和type是 AND 关系，顺序决定优先级——最具体规则放最前，兜底<img>必须存在且含src和alt - 对关键图片加
object-fit: cover; object-position: center top;，配合明确宽高容器，防止因 DPR 变化导致亚像素截断而模糊
真正麻烦的从来不是“怎么写”，而是 sizes 是否随 CSS 布局变化同步更新、viewport 是否被 JS 动态修改过、以及折叠屏下 window.innerWidth 和 screen.width 的差值是否被用来做降级判断——这些细节一漏，图片就在平板上静默崩溃。
