How to detect the screen DPI using JavaScript

Question

The only way I found till now, is getting the offsetWidth, offsetHeight of a test div element with height and width of one inch: http:

Answer 1

In webkit you can detect if your user has a so called "high dpi screen" by simply retrieving the value from window.devicePixelRatio.

Normal dpi screens will return 1. The iPhone 4 will return 2, but numbers like 1.8 or 2.12 are also possible.