Create a gist now

Instantly share code, notes, and snippets.

@marcedwards /high-dpi-media.css
Last active Jun 19, 2018

Embed
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 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

This comment has been minimized.

Show comment
Hide comment
@richardcornish

richardcornish Aug 24, 2012

Extra curly brace at the end?

richardcornish commented Aug 24, 2012

Extra curly brace at the end?
@wylieconlon

This comment has been minimized.

Show comment
Hide comment
@wylieconlon

wylieconlon Aug 24, 2012

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

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.

Show comment
Hide comment
@marcedwards

marcedwards Aug 25, 2012

Oh yep, you're both right. Fixed.
Owner

marcedwards commented Aug 25, 2012

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

This comment has been minimized.

Show comment
Hide comment
@coliff

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

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.

Show comment
Hide comment
@marcedwards

marcedwards Jan 13, 2013

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

marcedwards commented Jan 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Daizuko

Daizuko Feb 4, 2013

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

Daizuko commented Feb 4, 2013

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

This comment has been minimized.

Show comment
Hide comment
@stinoga

stinoga Jul 30, 2013

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

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

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.

Show comment
Hide comment
@iMuFeng

iMuFeng Feb 18, 2014

I have try this for the firefox on mac retina;

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

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.

Show comment
Hide comment
@chimos

chimos 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

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.

Show comment
Hide comment
@prasannavigneshr

prasannavigneshr 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.

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.

Show comment
Hide comment
@paulmillr

paulmillr Oct 10, 2014

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

paulmillr commented Oct 10, 2014

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

This comment has been minimized.

Show comment
Hide comment
@marcedwards

marcedwards 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.
Owner

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.

Show comment
Hide comment
@marcedwards

marcedwards 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!
Owner

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.

Show comment
Hide comment
@leClou

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

}

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.

Show comment
Hide comment
@TranslationLLC

TranslationLLC Jun 21, 2016

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

TranslationLLC commented Jun 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@dpschen

dpschen Aug 22, 2016

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

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment