resolution

Jump to: navigation, search

resolution

This article is In Progress.



Summary

The media feature describes the resolution (pixel-density) of the output device. The resolution can be specified in dpi (dots per inch), dppx (dots per pixel) or dpcm (dots per centimeter).


Syntax

  1. resolution: <resolution>
  2. min-resolution: <resolution>
  3. max-resolution: <resolution>

Values

resolution

Value for the resolution of a device must be a resolution value.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
21
Yes
?
Unknown
9.0
Yes
9
Yes
4
Yes
grid
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown
resolution
29
Yes
?
Unknown
?
Unknown
?
Unknown
?
Unknown
scan
?
Unknown
?
none
?
Unknown
?
Unknown
?
Unknown

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Yes
?
Yes
?
Unknown
?
Yes
?
Yes

Examples

The first media query describes a non-screen devices with a minimum resolution of 300 dots per inch.

The second example describes a device with a screen that has a pixel-density of 2 or higher.

CSS

@media print and (min-resolution: 300dpi) { ... }

@media screen and (min-resolution: 2dppx) { ... }