为什么非视网膜 Mac 会加载 2x 版本的图片元素

Question

我使用picturefill 2.0和带有一些动态URL的图片元素。

<picture alt="<?php the_title(); ?>" title="<?php the_title(); ?>">
    <source srcset="<?php echo $tablet; ?>, <?php echo $tablet; ?> 2x" media="(max-width: 950px)">
    <source srcset="<?php echo $laptop; ?>, <?php echo $laptop; ?> 2x" media="(max-width: 1440px)">
    <img srcset="<?php echo $desktop; ?>, <?php echo $desktop; ?> 2x">
</picture>

我创建了一个两倍大小的图像，如果我通过cookie检测到视网膜显示，则使用。

如果未检测到视网膜，则这些变量只是正常大小的图像。

我遇到的问题是非视网膜 Mac 正在从图片元素加载<?php echo $desktop; ?> 2x图像。

如果我从图片元素中删除 2x 选项，图像加载正常。

该图像不应该只由带有视网膜显示器的设备加载吗？

Answer 1

不要根据检测到的内容输出与 1x 和 2x 相同的图像。您无需检测任何内容。只需将您的 1x 图像输出为 1x，将 2x 图像输出为 2x。浏览器可以根据需要免费下载srcset的任何图像。