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 按预期工作；在纵向移动设备中，它将加载一个 'small' 图像，只需要填充宽度，如果您转动 phone 它将根据新宽度请求一个新图像。

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

但是 Safari 桌面版和移动版都不会在 resize/turn 设备上请求新图像。但它确实在重新加载时请求正确的图像。

我尝试使用 Safari 9.1.2 和 11.0，iPhone 6 (iOS 10.3.2)，iPhone 6s (iOS 11.0) 和 iPad 空气 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 的完全支持。根据我最近的经验，它绝非如此。

Answer 2

它也不会像 Chrome 那样在 110% 缩放等情况下使用 1.1x 或更高的 srcset 图像。

为简单起见：当我使用缩放时，图像在 Safari 中不清晰，而在 Chrome 中清晰。那里没什么可讨论的。 Safari 输了，Chrome 赢了。

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

Safari not requesting srcset images on resize

html

safari

mobile-safari

srcset

responsive-images