Skip to content

Instantly share code, notes, and snippets.

@marcedwards

marcedwards/high-dpi-media.css

Last active March 2, 2025 20:24
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.
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 */
}
@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