3

I've set up a bit of CSS to detect whether the client's using a Retina or other HiDPI display, and display a different background-image for various divs based on that. Here's my syntax:

<!-- LoDPI and MedDPI displays -->
#div {
    opacity:0.4;
    position:absolute;
    top:0px;
    z-index:2;
    width:1600px;
    height:900px;
    animation-name:ring;
    animation-delay:0s;
    animation-duration:1500ms;
    animation-timing-function:cubic-bezier(0.225, 1.650, 0.000, 0.805);
    animation-fill-mode:forwards;
    background-image:url(/valid/path/to/regular/file);
}

<!-- For Retina and HiDPI displays -->
@media only screen and (min-device-pixel-ratio: 1.4) {
#div {
    background-image:url(/valid/link/to/HiDPI/file);
    background-position:center;
    background-size:contain;
    }
}

The problem is, when I try this out on my Retina MBP, whose pixel ratio is set to 1.5 ("acts like 1920x1200), displays the normal-res images rather than the high-res ones.

2 Answers 2

6

You don't have all your curly braces closed. Regardless, for better support matrix, substitute your media query with

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
         /*your rules*/
       }
5
  • Actually, I should mention that I've got the Prefix Free JS included, and that I missed the closing @media bracket in my initial question.
    – Jules
    Sep 29, 2012 at 4:46
  • I couldn't be sure if it were a typo or not. Are you using CSS comments instead of HTML ones as well? I'm not familiar with how well different Prefix Free-like JS workarounds work with media queries though.
    – Oleg
    Sep 29, 2012 at 4:48
  • So far, they work quite well; all other media queries on my site work fine (most are for resolutions), and use the same syntax.
    – Jules
    Sep 29, 2012 at 12:14
  • Actually, do you know if the W3C spec includes a max-device-pixel-ratio in addition to the min-device-pixel-ratio?
    – Jules
    Sep 29, 2012 at 12:15
  • That's min--moz-device-pixel-ratio. developer.mozilla.org/en-US/docs/CSS/…
    – RobW
    Jan 11, 2013 at 20:54
1

I had the same problem: min-device-pixel-ratio seems not to be supported (prefixed) by prefix-free js!? min-device-pixel-ratio isn't W3C compliant.

When I use it with vendor prefixes, everything works fine?!

this works fine for me (delete the comments)

@media (-webkit-min-device-pixel-ratio: 2), /*  Firefox16, Chrome, Safari, iOS, Android */
       (min--moz-device-pixel-ratio: 2),    /*  Older Firefox browsers (prior to Firefox16) */
       (-o-min-device-pixel-ratio: 2/1),    /*  Opera */
       (min-device-pixel-ratio: 2),         /*  not defined yet, http://www.w3.org/TR/css3-mediaqueries/ */
       (min-resolution: 2dppx),             /*  not yet, probably in future, see http://www.w3.org/TR/css3-mediaqueries/ */
       (min-resolution: 192dpi)             /*  works for non css3 browser */
       {
            /* your styles go here */
       }
  • the Opera values should be 1/1, 3/2, 2/1 equivalent to 1, 1.5 and 2.
  • dpi values should be 96, 144, 192 equivalent to 1, 1.5 and 2.

when using -webkit-text-size-adjust:none; font-sizes won't explode on iPhone when turning from portrait to landscape mode ;-)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.