Web/CSS/@media/resolution

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 QueriesThe definition of 'resolution' in that specification.	Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`resolution` media feature	Chrome Full support 29	Edge Full support 12	Firefox Full support 8 Full support 8 Partial support 3.5 Notes' Notes' Supports `<integer>` values only.	IE Full support 9	Opera Full support 16 Full support 16 No support 10 — 15	Safari No support No Notes' No support No Notes' Notes' See bug 78087.	WebView Android Full support ≤37	Chrome Android Full support 29	Firefox Android Full support 8 Full support 8 Partial support 4 Notes' Notes' Supports `<integer>` values only.	Opera Android Full support 16 Full support 16 No support 10.1 — 14	Safari iOS No support No Notes' No support No Notes' Notes' See bug 78087.	Samsung Internet Android Full support 2.0

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.