CSS: React to Display Density for Responsive Design

Using some CSS responsive design, you can make a website adapt to the screen resolution. This is heavily used to adapt website for mobile experience (changing menu position, etc).

However, now the mobile devices have increased resolution because they put more pixels in the same space [1]. Pixels become smaller and you might want to adapt your website to this information. For example you might want to show different things to a Nexus 4 visitor (1280x768) and to a visitor with an old 17 inches screen (also 1280x768).

Display density awareness can be done in CSS like this: 

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .c144 {
    background: green;
    color: white;
  }
}

You can also have a look at another short post or the css file of this page.

Tests

Simple Test

The following boxes should be green if your device density is at least the indicated pixel-per-inch value.

50
96
100
144
150
200
250
300
350
400

Funky Test

You seem to have javascript disabled, turn it on to enable this test. This test requires javascript to be enabled: the goal is to avoid network-heavy transfer of css and html, so it is generated on the client.

Legend:

  • the green bar shows the display density indirectly reported by your browser,
  • there is a small tick every 5 units,
  • there is a bigger tick every 50 units,
  • hover a box to see its value.

Some pointers and notes