srcset和sizes属性：视网膜设备会选择正确的双倍大小图像吗？

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图像。

- Blackbam

---

您可以使用Chrome开发工具测试视网膜屏幕，方法是打开响应式视图，点击菜单点，“添加设备像素比”，然后您就可以选择1x、2x、3x。 - 00-BBB

Answer 1

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

以您的示例为例：

1440/1200 = 1.2 1920/1200 = 1.6

因此，如果屏幕尺寸为1200像素且非Retina，则会选择第一个，因为它最接近1（非Retina）。如果是Retina 1.5x或2x，则会选择第二个，因为1.6接近2。

- Ramon Dreise

---

在具有高清视网膜值的苹果设备上，从带宽方面来说并没有真正的节省。例如，你为 iPhone 8 创建了一个宽度为 414 像素的图像，但它会下载你为桌面创建的宽度为 1500 像素的图像，因此并没有节省带宽。 - Y.K.

Answer 2

当您在图像标签中使用srcset属性时，您可以在每个文件后面添加相应的设备像素比率（由空格分隔文件名并跟随逗号），这将定义哪个图像适合哪个屏幕。例如：

<img srcset="small_image.jpg 1x, medium_image.jpg 2x, large_image.jpg 3x" src="default_image.jpg" alt="whatever">

（在无法处理srcset的浏览器中，遵循srcset后面的常规src属性）

- Johannes

---

当然，但这并不是问题的真正答案。因为如果我像这样添加设备像素比，就不可能再添加宽度了。宽度为480px的屏幕应该使用图像2，具有480px宽度的视网膜屏幕应该使用图像3。宽度为960px的屏幕应该使用图像3，具有960px视网膜分辨率的屏幕应该使用图像4（假设视网膜是2倍）。 - Blackbam

问题是浏览器是否能理解这个问题，或者如何解决它。 - Blackbam

在使用sizes的同时，是否有必要同时使用srcset+dpr呢？ - Kalnode