The resolution
CSS media feature can be used to test the pixel density of the output device.
Syntax
The resolution
feature is specified as a <resolution>
value representing the pixel density of the output device. It is a range feature, meaning that you can also use the prefixed min-resolution
and max-resolution
variants to query minimum and maximum values, respectively.
Examples
HTML
<p>This is a test of your device's pixel density.</p>
CSS
/* Exact resolution */ @media (resolution: 150dpi) { p { color: red; } } /* Minimum resolution */ @media (min-resolution: 72dpi) { p { text-decoration: underline; } } /* Maximum resolution */ @media (max-resolution: 300dpi) { p { background: yellow; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries The definition of 'resolution' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
resolution media feature | Chrome Full support 29 | Edge Full support 12 | Firefox
Full support
8
| IE Full support 9 | Opera
Full support
16
| Safari
No support
No
| WebView Android Full support ≤37 | Chrome Android Full support 29 | Firefox Android
Full support
8
| Opera Android
Full support
16
| Safari iOS
No support
No
| Samsung Internet Android Full support 2.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.