A CSS media query to target high DPI devices

Most devices nowadays have a high pixel density screen and tackling such devices while keeping the experience smooth for regular devices can be a tricky.

Here's a CSS media query I came across that captures almost all high DPI devices, so you can selectively target these devices and mention additional styles for them:

One use-case for this can be for selectively applying font-smoothing on high dpi media devices, something like this:

@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) {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
}

Another use-case can be, if you have some background images on a page, you can selectively load 2x size images that would look great on these high dpi devices.