The resolution
CSS media feature can be used to test the pixel density of the output device.
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.
<p>This is a test of your device's pixel density.</p>
/* 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; } }
Specification | Status | Comment |
---|---|---|
Media Queries The definition of 'resolution' in that specification. | Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 29 | ? | 8
|
? | Yes | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | ? | ? | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution