srcset 和 sizes 属性：视网膜设备会选择正确的双倍尺寸图像吗？
srcset and sizes attribute: Will a retina device choose the correct double size image?
不幸的是我没有视网膜设备来测试。这是我的代码：
<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&w=960&h=480&q=80&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&w=240&h=120&q=80&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&w=480&h=240&q=80&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&w=960&h=480&q=80&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&w=1440&h=720&q=80&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&w=1920&h=960&q=80&zc=1 1920w"
sizes="(min-width:960px) 960px,100vw"
alt="Animal X">
普通屏幕总是按预期选择正确的图像（已测试）。但是我想知道视网膜设备（分辨率为 1.5x 或 2x）是否会为主题选择正确的图像？
例如浏览器中 1200px 的视网膜屏幕 window 应该选择 1920w 图像，而不是 960w 图像。
当您在图片标签中使用 srcset 属性时，您可以在每个文件后添加相应的 设备像素比 （与文件名之间用 space 后跟一个逗号），这将定义哪个图像适合哪个屏幕。因此，例如
<img srcset="small_image.jpg 1x, medium_image.jpg 2x, large_image.jpg 3x" src="default_image.jpg" alt="whatever">
（srcset 后面的常规 src 属性被不能处理 srcset 的浏览器使用）
是的，会的。它会根据您的图像宽度和屏幕尺寸进行计算，然后检查 dpi。
在你的例子中：
1440/1200 = 1.2
1920/1200 = 1.6
因此，如果屏幕尺寸为 1200 像素且非视网膜屏幕，它将选择第一个，因为它最接近 1（非视网膜屏幕）。如果是视网膜 1.5x 或 2x，它将选择第二个，因为 1.6 接近 2.
不幸的是我没有视网膜设备来测试。这是我的代码：
<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&w=960&h=480&q=80&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&w=240&h=120&q=80&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&w=480&h=240&q=80&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&w=960&h=480&q=80&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&w=1440&h=720&q=80&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&w=1920&h=960&q=80&zc=1 1920w"
sizes="(min-width:960px) 960px,100vw"
alt="Animal X">
普通屏幕总是按预期选择正确的图像（已测试）。但是我想知道视网膜设备（分辨率为 1.5x 或 2x）是否会为主题选择正确的图像？
例如浏览器中 1200px 的视网膜屏幕 window 应该选择 1920w 图像，而不是 960w 图像。
当您在图片标签中使用 srcset 属性时，您可以在每个文件后添加相应的 设备像素比 （与文件名之间用 space 后跟一个逗号），这将定义哪个图像适合哪个屏幕。因此，例如
<img srcset="small_image.jpg 1x, medium_image.jpg 2x, large_image.jpg 3x" src="default_image.jpg" alt="whatever">
（srcset 后面的常规 src 属性被不能处理 srcset 的浏览器使用）
是的，会的。它会根据您的图像宽度和屏幕尺寸进行计算，然后检查 dpi。
在你的例子中：
1440/1200 = 1.2
1920/1200 = 1.6
因此，如果屏幕尺寸为 1200 像素且非视网膜屏幕，它将选择第一个，因为它最接近 1（非视网膜屏幕）。如果是视网膜 1.5x 或 2x，它将选择第二个，因为 1.6 接近 2.