html - 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有助于解释，虽然其中一些歧义是为了促进浏览器之间的竞争而设计的，但其中一些可能可以更好地澄清:

...the different behavior causes confusion. The most common question I hear is from people testing srcset in Safari and not seeing new images download as the viewport size changes.

There is nothing that says that the browser needs to download new images as the viewport changes. In fact, it probably doesn’t make sense to download a new image if the browser already has a larger version of it and can downsize it.So while this may be a feature and not a bug, we could do a better job setting expectations for developers.

与此同时，我会谨慎引用对 srcset 的完全支持。根据我最近的经验，这绝不是。