Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Added note on requirement for browser prefixes for HD images #39

Merged
merged 1 commit into from

3 participants

@wturrell

min-device-pixel-ratio alone isn't enough for the iPhone/iPad (in iOS 5.1). I've added a note but left the prefix-less code sample as it is to avoid the compound stuff with the widths becoming too confusing.

@bmuenzenmeyer

Yes, this is definitely required for actual implementation, but was left out for brevity. Your additions look great to me!

@scottjehl scottjehl merged commit a169e65 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 1 addition and 1 deletion.
  1. +1 −1  README.md
View
2  README.md
@@ -49,7 +49,7 @@ Notes on the markup above...
Picturefill natively supports HD(Retina) image replacement. While numerous other solutions exist, picturefill has the added benefit of performance for the user in only getting served one image.
-* The `data-media` attribute supports compound media queries, allowing for very specific behaviors to emerge. For example, a `data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)` attribute can be used to serve a higher resolution version of the source instead of a standard definition image.
+* The `data-media` attribute supports [compound media queries](https://developer.mozilla.org/en-US/docs/CSS/Media_queries), allowing for very specific behaviors to emerge. For example, a `data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)` attribute can be used to serve a higher resolution version of the source instead of a standard definition image. Note you currently also need to add the `-webkit-min-device-pixel-ratio` prefix (e.g. for iOS devices).
```html
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
Something went wrong with that request. Please try again.