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

【问题标题】：Safari not requesting srcset images on resizeSafari 在调整大小时不请求 srcset 图像
【发布时间】：2017-08-14 09:17:18
【问题描述】：

我想提供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 也是。

【问题讨论】：

标签： html safari mobile-safari responsive-images srcset

【解决方案1】：

srcset 的当前状态是这样的，我不完全确定您正在寻找什么是需求。

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

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

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

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

【讨论】：

我认识到这个问题很遗憾我还没有解决方案。 Chrome 期望如此。现在 WordPress 附带 srcset 作为其图像的默认设置，这会导致许多响应式页面中断。

【解决方案2】：

它也不像 Chrome 那样在 110% 缩放时使用 1.1 倍或更高的 srcset 图像。

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

【讨论】：