javascript - Image Srcset如何真正起作用？

我创造了一个很快的例子来说明我到目前为止的经历。
从未加载160px图像。
当我把宽度改为147px时
已加载320px图像。
当我把宽度改为227px时
已加载640px图像。
当我把宽度改为453px时
图像已加载。
我本以为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">

最佳答案

听起来你好像有一个2倍的屏幕，而你的浏览器正以几何平均的大小翻转。
回想一下，w数字只是图像像素的宽度，而不是关于浏览器窗口大小的命令或类似的命令。使用sizes中的大小（默认为100vw），可以将w数转换为等效的x数。例如，当你的屏幕是320px宽时，你的四种尺寸相当于.5x，1x，2x，4x。如果你有一个2x屏幕（这是目前macs的默认设置），那么浏览器通常会选择2x源，这是你的640w源。
这解释了你的转换号码。320和640的几何平均数是452.5；您会注意到227*2是454。640和1280也一样-几何平均值是905，453*2是906。