javascript - 图像源集到底如何工作？

Question

我创建了一个简单的示例来说明迄今为止我的经历。

1. 160px 图像永远不会加载。
2. 当我将宽度更改为 147px 时 320px 图像已加载。
3. 当我将宽度更改为 227px 时 640px 图像已加载。
4. 当我将宽度更改为 453px 时，宽度为 1280px 图片已加载。

我本以为 160px 图像会加载到浏览器宽度大于 160px，而 320px 图像会加载到浏览器宽度大于 320px，依此类推。

为什么事实并非如此？

编辑:看起来 stackoverflow 不是测试这个示例的好地方。您可能需要将代码复制粘贴到您自己的浏览器中才能复制不同的浏览器大小。

    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;

    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        // your size calculation code here
        document.getElementById("dimensions").innerHTML = "Current screen width: " + myWidth + "px";
    };

	<div id="dimensions"></div>
	<img src="http://imgur.com/z5X66tR"
	     srcset="http://imgur.com/z5X66tR.png 160w, 
	              http://imgur.com/kPOTVv7.png 320w, 
	              http://imgur.com/xj9RPrV.png 640w, 
	              http://imgur.com/PgJsD95.png 1280w">

Answer 1

听起来您有一个 2 倍的屏幕，并且您的浏览器正在以尺寸的几何平均值翻转。

回想一下，w 数字只是图像像素的宽度，而不是有关浏览器窗口大小或类似内容的命令。使用 sizes 中的大小(默认为 100vw)，您可以将 w 数字转换为等效的 x 数字。例如，当您的屏幕宽度为 320px 时，您的四种尺寸相当于 0.5x、1x、2x、4x。如果您有 2x 屏幕(目前 Mac 的默认设置)，浏览器通常会更喜欢 2x 源，即您的 640w 源。

这解释了您的转换编号。 320和640的几何平均值是452.5；您会注意到 227*2 是 454。640 和 1280 相同 - 几何平均值是 905，453*2 是 906。