1

Im using picturefill 2.0 and the picture element with some dynamic urls.

<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>

I have created an image that is twice the size and used if I detect a retina display via a cookie.

If no retina is detected then those variables are just the normal sized images.

The problem I'm having is that non-retina macs are loading the <?php echo $desktop; ?> 2x image from the picture element.

If I remove the 2x option from the picture element images load fine.

Shouldn't that image only be loaded by devices with retina displays?

4

1 回答 1

1

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

于 2015-03-26T14:49:26.280 回答