Safari不会在调整大小时请求srcset图像

Question

我想提供responsive images，因为我使用srcset属性。

<img 
    src="https://res.cloudinary.com/demo/image/upload/w_480/group.jpg" 
    alt=""
    srcset="
        https://res.cloudinary.com/demo/image/upload/w_480/group.jpg 480w,
        https://res.cloudinary.com/demo/image/upload/w_750/group.jpg 750w,
        https://res.cloudinary.com/demo/image/upload/w_1334/group.jpg 1334w,
        https://res.cloudinary.com/demo/image/upload/w_1536/group.jpg 1536w,
        https://res.cloudinary.com/demo/image/upload/w_2048/group.jpg 2048w
    "
>

Chrome和Android按预期工作;在移动设备中，它将加载一个“小”图像，只需填充宽度，如果你转动手机，它将根据新的宽度请求新图像。

在Chrome检查工具中，选择iOS设备（iPhone 6，iPad）效果很好：

但桌面和移动设备上的Safari不会在调整大小/转动设备上请求新图像。但它确实在重新加载时请求正确的图像。

我尝试使用Safari 9.1.2和11.0，iPhone 6（iOS 10.3.2），iPhone 6s（iOS 11.0）和iPad Air 2（iOS 11.0）。

Safari是否仍然缺乏对srcset的支持？ 它是suppose to be fully supported。

在codepen测试自己。 Code at codepen也是。

Answer 1

srcset的当前状态是这样的，我不完全确定你要找的是一个要求。

Jason Grigsby撰写的题为State of Responsive Images in 2017的文章有助于解释虽然这种模糊性的一些设计是为了促进浏览器之间的竞争，但其中一些可能会更好地澄清：

  

......不同的行为会导致混乱。我听到的最常见的问题是人们测试Safari中的srcset，并且在视口大小发生变化时没有看到新的图像下载。

     

没有任何内容表明浏览器需要在视口更改时下载新图像。实际上，如果浏览器已经拥有更大的版本并且可以缩小它，那么下载新图像可能没有意义。   因此，虽然这可能是一个功能而不是错误，但我们可以更好地为开发人员设定期望。

与此同时，我还要警惕完全支持srcset。在我最近的经历中，它一直都是。

Answer 2

由于Chrome正常运行，它也不会在110％变焦等上使用1.1x或更高的srcset图像。

简化：当我使用缩放时，Safari中的图像不清晰，Chrome中的图像清晰。 Nopthing在那里讨论。 Safari输了，Chrome赢了。