为什么我的srcset图片在移动端显示模糊？

问题出在sizes里的100vw，移动端浏览器viewport通常大于物理像素宽度，用100vw会让浏览器以为你需要很大的图。省事的话直接改成100%就行：

<img 

  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"

  sizes="(max-width: 600px) 100%, 600px"

  src="medium.jpg" 

  alt="示例图">

这样小屏设备就会正确选small.jpg了。

你的问题出在 sizes 的计算上。

浏览器会根据 sizes 属性告诉它：“这张图片在页面中实际显示的宽度是多少”，然后它会根据这个值和 srcset 中图片的宽度进行像素密度比对，选择“最合适的”图片。

你写的：

sizes="(max-width: 600px) 100vw, 600px"

意思是：
如果视口宽度 <= 600px，图片宽度 = 100vw（也就是视口的宽度）
否则，图片宽度 = 600px

iPhone 12 的视口是 390px，所以会走第一个分支，图片宽度是 390px。

但你给的图片 srcset 是：

small.jpg 480w

medium.jpg 800w

large.jpg 1200w

浏览器会根据显示宽度（390px）去匹配 srcset 中最合适的图片宽度，理论上 small.jpg（480w）是更合适的。

但你现在实际加载的是 medium.jpg（800w），说明浏览器选择了错误的图片。问题出在没有告诉浏览器图片的显示密度（x倍屏）。

你可以这样改：

<img 

  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"

  sizes="(max-width: 600px) 100vw, 600px"

  src="medium.jpg" 

  alt="示例图"

>

改成：

<img 

  srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"

  src="medium.jpg"

  alt="示例图"

>

或者保留 w 描述符，但加上 sizes 的实际 display size：

<img 

  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"

  sizes="(max-width: 600px) 100vw, 600px"

  src="medium.jpg" 

  alt="示例图"

>

再加 CSS 强制 img 不要拉伸过度：

.card img {

  width: 100%;

  height: auto;

  image-rendering: -webkit-optimize-contrast;

}

试试看，复制过去试试，应该能改善模糊问题。