如何测试 srcset 算法

Posted 2023-03-05

【中文标题】如何测试 srcset 算法

【英文标题】：How to test srcset algorithm

【发布时间】：2016-09-04 12:55:02

【问题描述】：

我问这个是因为在我的 Mac Retina 和 Google Chrome 开发者工具中，我看不到 srcset 中的其他图像。

<img srcset="image-415.jpg 415w,
             image-768.jpg 768w,
             image-992.jpg 992w,
             image-1440.jpg 1440w"
     src="image-1440.jpg" >

它总是带来更大的形象。

我正在做的测试是： - 打开开发者工具 - 调整我的窗口接近图像分辨率 - 刷新页面

更新

在线示例： Srcset

【问题讨论】：

这也是我遇到的问题 - 您找到解决方案了吗？我似乎认为这可能是一个缓存问题......但我不确定，所以我正在寻找一种设置方法来检查 srcset/sizes 是否有效。

@Daniel，什么也没找到。我开始认为该算法工作正常，因为视网膜显示一切看起来都一团糟呵呵

【参考方案1】：

很遗憾，您的页面已不再在线……

首先，您的代码缺少sizes 属性，该属性会告诉浏览器它应该呈现图像的宽度。当您在srcset 中使用w 描述符时，这（现在）是一个强制属性。

但是，如果缺少该属性，浏览器将默认为 100vw，这意味着视口的整个宽度。

在您的 Retina 显示屏上，您是否在清除缓存后尝试在视口小于 700px 宽的浏览器中加载页面？

【讨论】：

感谢您的回答尼古拉斯。我解决了这个问题，但不记得了，因为很久以前！呵呵。你说的我听的很清楚！