平板商品主图模糊的根本原因是浏览器加载低分辨率图源后用高DPR强行拉伸：①srcset须含明确DPR标注如"product.jpg 1x, product@2x.jpg 2x"；②sizes须真实反映视口占比；③img不能设硬高度值破坏宽高比维持。
为什么平板上商品主图看着糊，但桌面端正常？
根本不是图片本身质量差，而是浏览器在平板设备上加载了低分辨率图源，又用高 DPR（设备像素比）强行拉伸渲染。iPad Pro 11 英寸逻辑宽度是 834px，DPR=2；12.9 英寸横屏 DPR=2.5，但你的 src 或 background-image 可能只提供了一张 750px 宽的 @1x 图——它被放大 2 倍填充物理像素，插值算法一算，边缘就发虚、文字毛边、阴影糊成一片。
必须同时满足的三个硬性条件
单改一个地方没用，三者缺一不可：
-
srcset中必须包含明确标注 DPR 的图源，例如"product.jpg 1x, product@2x.jpg 2x"，路径大小写、扩展名、@符号一个都不能错 -
sizes必须真实反映该图在平板断点下的视口占比，比如在@media (min-width: 768px)下占容器 100vw，就得写sizes="(min-width: 768px) 100vw, 50vw" -
img元素不能有内联height或 CSS 中的height: 200px等硬值，否则会破坏height: auto对宽高比的维持，导致object-fit: cover失效或裁切异常
常见踩坑：Safari + iPadOS 的特殊雷区
iPadOS 16+ 和 Safari 15.3+ 对 object-fit 支持没问题，但对资源加载逻辑极其敏感：
- 如果用了
image-set()，Safari 16.4+ 要求-webkit-image-set()必须写在前面，且路径必须带引号、单位必须是2x（不是2xpx） - 构建工具（如 Vite）默认会过滤含
@的文件名，product@2x.jpg很可能根本没打进 dist 目录——去 Network 面板里搜@2x，看是否 404 - CDN（尤其是部分阿里云/腾讯云静态加速配置）会拦截
@符号，导致高倍图请求失败，回退到 @1x 渲染 - 千万别在
img上加transform: scale(1)或will-change: transform，它们触发亚像素渲染，直接让object-fit计算失准
验证是否真正生效的唯一方式
打开 iPad 真机 Safari，进开发者工具 → Elements → 选中 img → 看 computed 样式里 background-size（如果是背景图）或 src 属性实际加载的是哪张图。如果 Network 面板里始终是 product.jpg 而非 product@2x.jpg，其他所有 object-fit、aspect-ratio、image-rendering 都只是在给模糊打补丁。
立即学习“前端免费学习笔记（深入）”；
