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

Question

我想提供响应式图像，为此我使用 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 的支持？它被认为是完全支持的。

在codepen测试自己。 也在 codepen 上写代码。

Answer 1

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

\n

Jason Grigsby 撰写的这篇题为《2017 年响应式图像状况》的文章有助于解释，虽然其中一些含糊之处是有意为之，以促进浏览器之间的竞争，但其中一些可能可以更好地澄清：

\n

\n

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

\n

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

\n

\n

与此同时，我对引用 srcset 的完全支持持谨慎态度。根据我最近的经验，事实并非如此。

\n