I was looking for a way to figure out the DPI of a device for use in mobile design. I haven’t found it yet, but I found a trick to find out whether the reader of the site uses a retinal display. Here's how to achieve this without the hassle:

var retina = window.devicePixelRatio > 1 ? true : false; 

Now the variable retina will take the value true if the reader has a retinal display. In the future, you can use a simple if statement to execute a particular code depending on the type of display.

 if (retina) { //     retina } else { //      retina } 

What for?

Here is a good example: if I have an illustration (or video) of 100 × 100 on my site, then the above code will advise me to download an enlarged size (200 × 200) illustration so that it looks clearly on iPhone 4 - and users of other devices will not have to download a picture 200 × 200 unnecessarily. After all, speed is especially important for mobile users.

 if (retina) { var html = '<img src="200x200.jpg" width=100 height=100>'; } else { var html = '<img src="100x100.jpg" width=100 height=100>'; }