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

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

Answer 1

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

在你的例子中：

1440/1200 = 1.2

1920/1200 = 1.6

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

Answer 2

在图片代码中使用srcset属性时，可以在每个文件后添加相应的设备像素比率（从文件名中用空格分隔后跟逗号），这将定义哪个图像适合哪个屏幕。所以那就是

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

（src后面的常规srcset属性被浏览器使用，无法处理srcset）

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

2 个答案: