Html srcset和sizes属性：视网膜设备会选择正确的双尺寸图像吗？

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

<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.5倍或2倍）是否会为主题选择正确的图像

---

e、 g.浏览器窗口中1200px的视网膜屏幕应选择1920w图像，而不是960w图像。

当您在图像标签中使用

srcset

属性时，您可以在每个文件后添加相应的设备像素比（与文件名用空格分隔，后跟逗号），这将定义哪个图像适合哪个屏幕。例如，这就是

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

---

（无法处理

srcset

的浏览器使用

srcset

后的常规

src

属性）

在图像标记中使用

srcset

属性时，可以在每个文件后添加相应的设备像素比率（与文件名之间用空格分隔，后跟逗号），这将定义哪个图像适合哪个屏幕。例如，这就是

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

---

（无法处理

srcset

的浏览器使用

src

后的常规

src

属性）

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

在您的示例中：

1440/1200=1.2

1920/1200=1.6

---

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

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

在您的示例中：

1440/1200=1.2

1920/1200=1.6

---

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

当然，但这并不是问题的答案。因为如果我像这样添加设备像素比率，就不可能再添加宽度了。480px宽的屏幕应使用图像2，480px宽的视网膜屏幕应使用图像3。宽度为960px的屏幕应使用图像3，分辨率为960px的屏幕应使用图像4（假设视网膜为2x）。问题是浏览器是否理解这一点或如何解决它。当然，这并不是问题的真正答案。因为如果我像这样添加设备像素比率，就不可能再添加宽度了。480px宽的屏幕应使用图像2，480px宽的视网膜屏幕应使用图像3。960像素宽的屏幕应该使用图像3，960像素视网膜分辨率的屏幕应该使用图像4（假设视网膜是2倍）。问题是浏览器是否理解这一点或如何解决这一问题。因此，在具有高视网膜值的苹果设备上，在带宽方面没有真正的节约。你为iPhone8创建了一个414px宽的图像，它会下载你为桌面创建的1500px宽的图像。因此，在高视网膜价值的苹果设备上，没有真正的带宽节约。你为iPhone8创建了一个414px宽的图像，它会下载你为桌面创建的1500px宽的图像。