srcset 和 size 属性：Retina 设备会选择正确的双倍尺寸图像吗？

Question

不幸的是，我没有要测试的视网膜设备。这是我的代码：

<img src="http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=960&amp;h=480&amp;q=80&amp;zc=1" 
srcset="
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=240&amp;h=120&amp;q=80&amp;zc=1 240w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=480&amp;h=240&amp;q=80&amp;zc=1 480w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=960&amp;h=480&amp;q=80&amp;zc=1 960w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=1440&amp;h=720&amp;q=80&amp;zc=1 1440w,
http://localhost/example/wp-content/themes/example/libs/lib_cis/libs/renderer.php?src=http://localhost/example/wp-content/uploads/2017/12/dummy-960x480-Dragonfly.jpg&amp;w=1920&amp;h=960&amp;q=80&amp;zc=1 1920w" 
sizes="(min-width:960px) 960px,100vw" 
alt="Animal X">

正常屏幕总是按预期选择正确的图像（已测试）。但是我想知道 Retina 设备（分辨率为 1.5x 或 2x）是否会为主题选择正确的图像？

例如，浏览器窗口中 1200 像素的视网膜屏幕应该选择 1920w 图像，而不是 960w 图像。

Answer 1

是的，它会。它根据您的图像宽度和屏幕尺寸进行计算，然后检查 dpi。

在你的例子中：

1440/1200 = 1.2

1920/1200 = 1.6

因此，如果屏幕大小为 1200px 且非视网膜，它将选择第一个，因为它最接近 1（非视网膜）。如果是视网膜 1.5x 或 2x，它会选择第二个，因为 1.6 接近 2。