html - 如何测试 srcset 算法

Question

我问这个是因为在我的 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" alt="Image">

它总是带来更大的形象。

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

更新

在线示例： Srcset

Answer 1

很遗憾，您的页面已不再在线……</p>

首先，您的代码遗漏了一个sizes属性，该属性会告诉浏览器它应该渲染图像的宽度。当您w在srcset.

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

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