res

CSS resolution detection in JavaScript ```sh npm install res --save ```

API

res.dpi()

• Get resolution in dpi

• @return number

res.dpcm()

• Get resolution in dpcm

• @return number

res.dppx()

• Get resolution in dppx

• @return number

Usage

```js var res = require('res') res.dppx() // 1 res.dpi() // 96 res.dpcm() // 37.79527559055118 ```

Technical notes

• dppx equals devicePixelRatio

• dppx is the preferred resolution unit for web design

• User zoom affects resolution

Use with care

res was mainly written for investigative purposes. Making retina design accommodations can be impractical. Consider alternatives to resolution detection.

Example outputs

<th scope="col">Device</th>

<th scope="col"><code>res.ddpx()</code></th>

<th scope="col"><code>res.dpi()</code></th>

<th scope="col"><code>res.dpcm()</code></th>

<td>desktop at default zoom</td>

<td>1</td>

<td>96</td>

<td>37.79527559055118</td>

<td>iPhone 4s at default zoom</td>

<td>2</td>

<td>192</td>

<td>75.59055118110236</td>

Compatibility

Browsers with resolution detectable by res

• Webkit (Chrome/Safari/Android)

• Firefox 18+

• Opera 11.1+ (Presto 2.8+)

• IE 6+

Methods return 0 where undetectable.

Related resources

• actual

• CSS4 resolution

• CSS3 resolution and units

• Demo media queries

• Resolution lab

License

MIT