Skip to content

Instantly share code, notes, and snippets.

@marcedwards

marcedwards/high-dpi-media.css

Last active Jan 24, 2021
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
A CSS media query that captures almost all high DPI aware devices.
Raw
high-dpi-media.css
/* ---------------------------------------------------------- */
/* */
/* 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

This comment has been minimized.

Sign in to view
Copy link

@richardcornish richardcornish commented Aug 24, 2012

Extra curly brace at the end?
@wylieconlon

This comment has been minimized.

Sign in to view
Copy link

@wylieconlon wylieconlon commented Aug 24, 2012

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

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@marcedwards marcedwards commented Aug 25, 2012

Oh yep, you're both right. Fixed.
@coliff

This comment has been minimized.

Sign in to view
Copy link

@coliff 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

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@marcedwards marcedwards commented Jan 13, 2013

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

This comment has been minimized.

Sign in to view
Copy link

@Daizuko Daizuko commented Feb 4, 2013

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

This comment has been minimized.

Sign in to view
Copy link

@stinoga stinoga commented Jul 30, 2013

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

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

This comment has been minimized.

Sign in to view
Copy link

@iMuFeng iMuFeng commented Feb 18, 2014

I have try this for the firefox on mac retina;

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

This comment has been minimized.

Sign in to view
Copy link

@chimos 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

This comment has been minimized.

Sign in to view
Copy link

@prasannavigneshr prasannavigneshr commented Aug 19, 2014

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

This comment has been minimized.

Sign in to view
Copy link

@paulmillr paulmillr commented Oct 10, 2014

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

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@marcedwards marcedwards commented Feb 25, 2015

@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

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@marcedwards marcedwards commented Feb 25, 2015

@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

This comment has been minimized.

Sign in to view
Copy link

@leClou 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

This comment has been minimized.

Sign in to view
Copy link

@TranslationLLC TranslationLLC commented Jun 21, 2016

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

This comment has been minimized.

Sign in to view
Copy link

@dpschen 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

This comment has been minimized.

Sign in to view
Copy link

@dandv dandv commented Apr 19, 2020

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

This comment has been minimized.

Sign in to view
Copy link
Owner Author

@marcedwards marcedwards commented Apr 19, 2020

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