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.

Example

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support29 ?

8

3.51

? Yes ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?

1. Supports <integer> values only.

Document Tags and Contributors

Contributors to this page: Artoria2e5, connorshea, ExE-Boss, mfluehr, kscarfone, cvrebert
Last updated by: Artoria2e5,