Safari没有请求调整大小的srcset图像

问题描述：

我想提供responsive images，因为我使用srcset属性。Safari没有请求调整大小的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按预期工作;在纵向移动中，它会加载一个'小'图像，只是填充宽度所需的图像，如果您打开手机，它将根据新宽度请求新图像。

在铬检查工具选择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。

答

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

本文由Jason格雷斯比题为State of Responsive Images in 2017有助于解释，尽管一些这种不确定性的是设计，以提升浏览器之间的竞争，一些这也许可以更好地澄清：

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

没有什么说浏览器需要在视口更改时下载新图像。事实上，如果浏览器已经有更大的版本并且可以缩小它的尺寸，那么下载新图片可能没有意义。因此，虽然这可能是一个功能而不是bug，但我们可以为开发人员设置更好的工作预期。

与此同时，我会谨慎引用对srcset的全面支持。在我最近的经历中，它一直都是。

Safari没有请求调整大小的srcset图像

相关推荐