Safari不要求重新设置大小的srcset图像 [英] Safari not requesting srcset images on resize

问题描述

我想提供响应图像，因为我使用srcset属性.

I want to provide responsive images, for that I use srcset attribute.

<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 and android works as expected; in a mobile in portrait it will load a 'small' image, just the needed to fill the width, if you turn the phone it will request a new image according to the new width.

在Chrome检查器工具中，选择iOS设备(iPhone 6，iPad)效果很好:

In Chrome inspector tool selecting an iOS devices (iPhone 6, iPad) works well:

但是，无论是台式机还是移动版，Safari都不会在调整大小/翻转设备上请求新图像.但是它确实要求重新加载正确的图像.

But Safari both desktop and mobile doesn't request a new image on resize/turn device. But it does request the correct image on reload.

我尝试使用Safari 9.1.2和11.0，iPhone 6(iOS 10.3.2)，iPhone 6s(iOS 11.0)和iPad Air 2(iOS 11.0).

I tried with Safari 9.1.2 and 11.0, iPhone 6 (iOS 10.3.2), iPhone 6s (iOS 11.0) and iPad Air 2 (iOS 11.0).

Safari是否仍然缺少对srcset的支持? 应该得到完全支持.

Does Safari have still a lack of support for srcset? It is suppose to be fully supported.

在 codepen 中进行测试. 代码笔处的代码.

推荐答案

srcset的当前状态是如此，以至于我不确定您要查找的内容是否是必需的.

The current state of srcset is such that I am not entirely sure what you are looking for is a requirement.

Jason Grigsby撰写的这篇文章，标题为 2017年响应式图像状态有助于说明，虽然其中一些歧义是为了促进浏览器之间的竞争而设计的，但其中一些模糊性可能会得到更好的阐明:

This article by Jason Grigsby entitled State of Responsive Images in 2017 helps explain that while some of this ambiguity is by design to promote competition between browsers, some of this could probably be clarified better:

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

...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的完全支持.根据我最近的经验，没什么.

In the meantime I would be wary of quoting full support for srcset just yet. In my recent experience it has been anything but.

这篇关于Safari不要求重新设置大小的srcset图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！