Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanve/res
Device resolution detection module
https://github.com/ryanve/res
dpcm dpi dppx javascript resolution
Last synced: 16 days ago
JSON representation
Device resolution detection module
- Host: GitHub
- URL: https://github.com/ryanve/res
- Owner: ryanve
- License: mit
- Created: 2013-09-18T16:51:42.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-09-12T00:32:18.000Z (about 8 years ago)
- Last Synced: 2024-10-14T04:23:19.450Z (about 1 month ago)
- Topics: dpcm, dpi, dppx, javascript, resolution
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/res
- Size: 27.3 KB
- Stars: 39
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# res
[CSS resolution](http://www.w3.org/TR/css3-values/#resolution) detection in JavaScript
```sh
npm install res --save
```
## API
### `res.dpi()`
- Get resolution in [dpi](http://www.w3.org/TR/css3-values/#dpi)
- @return number
### `res.dpcm()`
- Get resolution in [dpcm](http://www.w3.org/TR/css3-values/#dpcm)
- @return number
### `res.dppx()`
- Get resolution in [dppx](http://www.w3.org/TR/css3-values/#dppx)
- @return number
## Usage
```js
var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118
```
### Technical notes
- [dppx](http://www.w3.org/TR/css3-values/#dppx) equals [`devicePixelRatio`](http://dev.w3.org/csswg/cssom-view/#dom-window-devicepixelratio)
- [dppx](http://www.w3.org/TR/css3-values/#dppx) is the preferred resolution unit for web design
- [User zoom affects resolution](../../issues/1)
### Use with care
res was mainly written for [investigative](http://ryanve.com/lab/resolution/) purposes. Making [retina](../../issues/2#issuecomment-41459302) design accommodations can be impractical. Consider alternatives to resolution detection.
### Example outputs
Device
res.ddpx()
res.dpi()
res.dpcm()
desktop at default zoom
1
96
37.79527559055118
iPhone 4s at default zoom
2
192
75.59055118110236
## 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](https://github.com/ryanve/actual)
- [CSS4 resolution](http://dev.w3.org/csswg/mediaqueries4/#resolution)
- [CSS3 resolution](http://w3.org/TR/css3-values/#resolution) and [units](http://w3.org/TR/css3-values/#absolute-lengths)
- [Demo media queries](http://ryanve.com/lab/@media/#mq-resolution)
- [Resolution lab](http://ryanve.com/lab/resolution/)
## License
MIT