Skip to content

Instantly share code, notes, and snippets.

@marcedwards
Last active November 19, 2023 12:56
Show Gist options
  • Save marcedwards/3446599 to your computer and use it in GitHub Desktop.
Save marcedwards/3446599 to your computer and use it in GitHub Desktop.
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 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. */
/* */
/* @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
Copy link

Extra curly brace at the end?

@wylieconlon
Copy link

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

@marcedwards
Copy link
Author

Oh yep, you're both right. Fixed.

@coliff
Copy link

coliff commented Dec 4, 2012

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
Copy link
Author

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

@Daizuko
Copy link

Daizuko commented Feb 4, 2013

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

@stinoga
Copy link

stinoga commented Jul 30, 2013

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

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

@iMuFeng
Copy link

iMuFeng commented Feb 18, 2014

I have try this for the firefox on mac retina;

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

@chimos
Copy link

chimos commented Jul 7, 2014

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

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.

@paulmillr
Copy link

Media queries for iPhone 6 plus only: https://gist.github.com/paulmillr/24694465f292d25128cc

@marcedwards
Copy link
Author

@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
Copy link
Author

@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
Copy link

leClou commented Jul 14, 2015

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

}

@TranslationLLC
Copy link

Amazing... Anyone have a media query to target all Android devices?

@dpschen
Copy link

dpschen commented Aug 22, 2016

Awesome!
I use this to use more beautiful font-smoothing on high dpi media devices:
https://gist.github.com/dpschen/aebfd3e140333fdfd5d4f9a79eb3dd2b

@dandv
Copy link

dandv commented Apr 19, 2020

This was published in 2012. Is it still actual in 2020, or are there better methods?

@marcedwards
Copy link
Author

This was published in 2012. Is it still actual in 2020, or are there better methods?

As far as I’m aware, it’s still a great way to go. webkit-min-device-pixel-ratio is non-standard, but widely supported. min-resolution is the standard. Having both seems good. You could probably drop -o-min-device-pixel-ratio, given Opera has supported webkit-min-device-pixel-ratio since 2013.

webkit-min-device-pixel-ratio reference

min-resolution reference:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment