2

我创建了一个简单的例子来说明我到目前为止的经历。

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

我会认为 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">

4

1 回答 1

3

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

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

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

于 2015-10-02T19:15:45.650 回答