Skip to content

@marcedwards /high-dpi-media.css
Last active

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A CSS media query that captures almost all high DPI aware devices.
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
/* - Android tvdpi devices, including Google Nexus 7 */
/* - Chrome running on high DPI Macs and PCs */
/* - Opera running on high DPI Macs, PCs and mobile devices */
/* */
/* Please note that that this code assumes you'll swap a */
/* 2× version of your images. If you'd like to supply */
/* finer increments, other thresholds might be appropriate. */
/* */
/* A test for CSS pixel densites can be found here: */
/* http://bjango.com/articles/min-device-pixel-ratio/ */
/* */
/* @marcedwards from @bjango */
/* */
/* ---------------------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi)
{
/* Your code to swap higher DPI images */
}
@richardcornish

Extra curly brace at the end?

@wylieconlon

The extra curly brace and dangling comma cause this to fail, so here's my fork

@marcedwards
Owner

Oh yep, you're both right. Fixed.

@coliff

your media query is brilliant. I've started using it for all my projects and it works perfectly.

FYI - it also works with Low DPI Windows & OS X PCs with Firefox zoomed in (tested today with FF 17 on Windows 8 and OS X 10.8.2)

@marcedwards
Owner

@coliff Thanks! I've updated the comment to include your info.

@Daizuko

Smart idea! Will try this out on my next project.

@stinoga

Awesome media query! What about the new(er) dppx unit? Worth adding yet?

@media (min-resolution: 1.3dppx) {}

@iMuFeng

I have try this for the firefox on mac retina;

min--moz-device-pixel-ratio:1.5
@chimos

Thanks for sharing this, It works really good! However with Chrome v.35 I get this Debug message in the console:

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.3), not all, only screen and (min-resolution: 120dpi)

It is not an error nor a warning. Is this something expected? Maybe is something to consider. Hope it helps
Thanks again

@prasannavigneshr

Hi, How to target Galaxy Tab 4 7inch, it uses the same resolution for Samsung Galaxy Tab 4 10 inch 1280*800. I have the media query for 10 inch but, in my 7 inch i tools the CSS of 10inch. How to differentiate the media query in this case. Thanks in advance.

@marcedwards
Owner

@stinoga It seems like dppx still doesn’t have full support: http://caniuse.com/#feat=css-media-resolution

@chimos Please see above. :) dppx should be the way to go, but it doesn’t have support everywhere yet. Hopefully soon.

@marcedwards
Owner

@prasannavigneshr If they’re the same resolution, you’d have to find out the min-device-pixel-ratio or min-resolution(dppx) for each device. Hopefully they’re different, otherwise you couldn’t target specific CSS (there may be other options, but they may get more tricky).

@paulmillr Nice!

@leClou

Merci ça fonctionne très bien pour moi avec quelques ajouts pour les portables et les tablettes et min-résolution: 240dpi ce qui exclu les mDPI, je n'ai pas inclu les téléphones.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),only screen and (-o-min-device-pixel-ratio: 13/10),only screen and (min-resolution: 240dpi){

@media screen and (min-width: 1024px) {
    #hockey2{
        font-size:1.2em !important;
    }
}   
@media screen and (min-width: 1050px) { 
    #p{
        display:block !important;
    }
    #aside{
        margin-top:150px !important;
    }
    #hockey2{
        top:153px;
    }
    body{
    font-size:1.1em;
    }
}
@media screen and (min-width: 1280px) {
    #hockey2{
        font-size:1em !important;
    }
}
@media screen and (min-width: 1440px) {
    #hockey2{
        font-size:1.2em !important;
    }
}

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.