Last active
November 19, 2023 12:56
-
-
Save marcedwards/3446599 to your computer and use it in GitHub Desktop.
A CSS media query that captures almost all high DPI aware devices.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ---------------------------------------------------------- */ | |
| /* */ | |
| /* 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 */ | |
| } |
Awesome!
I use this to use more beautiful font-smoothing on high dpi media devices:
https://gist.github.com/dpschen/aebfd3e140333fdfd5d4f9a79eb3dd2b
This was published in 2012. Is it still actual in 2020, or are there better methods?
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
- https://caniuse.com/#feat=mdn-css_at-rules_media_-webkit-device-pixel-ratio
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio
min-resolution reference:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Amazing... Anyone have a media query to target all Android devices?