html - srcset 和 sizes 属性 : Will a retina device choose the correct double size image?

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">

普通屏幕总是按预期(测试)选择正确的图像。但是我想知道视网膜设备(分辨率为 1.5x 或 2x)是否会为主题选择正确的图像？

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

Answer 1

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

在你的例子中:

1440/1200 = 1.2

1920/1200 = 1.6

因此，如果屏幕尺寸为 1200 像素且非视网膜屏幕，它将选择第一个，因为它最接近 1(非视网膜屏幕)。如果是视网膜 1.5x 或 2x，它将选择第二个，因为 1.6 接近 2。