This could be purely down to me using an incorrect syntax. However, should Picturefill support a full vendor stack for targeting high-resolution devices?
For example, in the example below, I would expect high-resolution.jpg to load for any media-query capable user agent. However, it doesn't. Is that because I have the syntax wrong? Do I need to declare each vendor prefix separately?
`
<div data-src="high-resolution.jpg" data-media="(min-resolution: 96dpi,-webkit-min-device-pixel-ratio: 1,min--moz-device-pixel-ratio: 1,-o-min-device-pixel-ratio: 1/1,min-device-pixel-ratio: 1,min-resolution: 1dppx)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="normal.jpg" alt="An image, whose source changes depending upon the media query style expressions"></noscript>
</div>`
That said, I think you might want 1.5 or 2 rather than 1 as well? Otherwise, that query will match my non-HD macbook air in Chrome.
Hope that helps!
Fixes #26
On Jul 3, 2012, at 10:43 AM, bfuk wrote:
This could be purely down to me using an incorrect syntax. However, should Picturefill support a full vendor stack for targeting high-resolution devices?
For example, in the example below, I would expect high-resolution.jpg to load for any media-query capable user agent. However, it doesn't. Is that because I have the syntax wrong? Do I need to declare each vendor prefix separately?
`
<div data-src="high-resolution.jpg" data-media="(min-resolution: 96dpi,-webkit-min-device-pixel-ratio: 1,min--moz-device-pixel-ratio: 1,-o-min-device-pixel-ratio: 1/1,min-device-pixel-ratio: 1,min-resolution: 1dppx)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="normal.jpg" alt="An image, whose source changes depending upon the media query style expressions"></noscript>
This could be purely down to me using an incorrect syntax. However, should Picturefill support a full vendor stack for targeting high-resolution devices?
For example, in the example below, I would expect high-resolution.jpg to load for any media-query capable user agent. However, it doesn't. Is that because I have the syntax wrong? Do I need to declare each vendor prefix separately?
`
Looks like that syntax is a little off, yeah.
Each query needs to be contained in parentheses, with commas between any that you'd like to specify as "OR".
Try:
That said, I think you might want 1.5 or 2 rather than 1 as well? Otherwise, that query will match my non-HD macbook air in Chrome.
Hope that helps!
Fixes #26
On Jul 3, 2012, at 10:43 AM, bfuk wrote:
Yep, that works perfect, thanks. Yes, I'd set the ratio to be normal (e.g. 1/1) just for testing on my desktop ;)
In case anyone else, wants a working copy/paste vendor stack for High-res devices (this covers Webkit, Mozilla, Opera, W3C possible and W3C likely):
<div data-src="high-resolution.jpg" data-media="(min-resolution: 192dpi),(-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2),(-o-min-device-pixel-ratio: 2/1),(min-device-pixel-ratio: 2),(min-resolution: 2dppx)"></div>Should do it.
Thanks for this great tool Scott.