Density Converter by Jeff Broderick

Indicates your screen's current density.

How to detect density with just CSS

It's actually quite easy to detect the pixel density with just a little CSS. By modifying the same @media query slightly we can get pretty accurate density control.

For iOS and Mac devices it's pretty straight-forward. We have our normal CSS, but then override with retina (2x). This covers the majority of current devices and users.

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 320dpi) {

If you want deeper control of your density buckets just modify the -webkit-min-device-pixel-ratio and multiply its value by 160 to get the value of min-resolution, here are the basic buckets Android supports. Much more than this is overkill.

@media (-webkit-min-device-pixel-ratio: 0.75),
       (min-resolution: 120dpi) {
       // LDPI CSS HERE
@media (-webkit-min-device-pixel-ratio: 1),
       (min-resolution: 160dpi) {
       // MDPI CSS HERE
@media (-webkit-min-device-pixel-ratio: 1.33),
       (min-resolution: 213dpi) {
       // TVDPI CSS HERE
@media (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 240dpi) {
       // HDPI CSS HERE
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 320dpi) {
       // XHDPI CSS HERE
@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 480dpi) {
@media (-webkit-min-device-pixel-ratio: 4),
       (min-resolution: 640dpi) {

I have always struggled creating the perfect assets for all screen densities for both Android and iOS. This greatly decreases the time spent creating assets for me, so I figured I would share. Numbers are rounded up to prevent any pixels from getting clipped.

and please with your friends!