Media Queries
Allows websites to know your media context.
Many websites use media queries to adapt their contents to your media context, but they can also be abused to uniquely identify you:
Because media queries provide insights into the capabilities--and by extension, the features and design--of the device the user is working with, there is the potential that they could be abused to construct a fingerprint which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.
Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer.
This page lists the available enumerated or enumerable queries, their return values, and what your user agent returns for each. Some of them may not be supported.
The set of queries shown here adheres to Media Queries Level 5.
Media Type
- screenStandard viewing context.
- printPrinting contexts.
Media Features
You can by tapping on the button.
Viewport or Page Characteristics
orientation
- portraitThe viewport or page height is greater than or equal to its width.
- landscapeThe viewport or page height is lesser than its width.
overflow-block
- noneBlock-overflowing content is not displayed.
- scrollBlock-overflowing content is exposed with scrolling.
- pagedBlock-overflowing content is displayed on the following page.
overflow-inline
- noneInline-overflowing content is not displayed.
- scrollInline-overflowing content is exposed with scrolling.
display-mode
- fullscreenNo user agent chrome.
- standaloneStandalone application look and feel.
- minimal-uiAs above and with minimal UI elements.
- browserStandard browser context.
Display Quality
scan
- interlaceThe output device draws odd and even lines alternately.
- progressiveThe output device draws lines sequentially.
grid
- 1The output device is grid-based.
- 0The output device is bitmap-based.
update
- noneThe layout can no longer be updated.
- slowAs below, but the output device is constrained in speed.
- fastThe layout may change dynamically.
environment-blending
- opaqueBlack is dark and white is 100% light.
- additiveBlack is fully transparent and white is 100% light.
- subtractiveWhite is fully transparent and dark colors have the most contrast.
Color
color
- colorThe output device supports color.
- 0The output device does not support color.
color-index
- color-indexThe output device uses a color lookup table.
- 0The output device does not use a color lookup table.
monochrome
- monochromeThe output device supports monochrome.
- 0The output device does not support monochrome.
color-gamut
- srgbThe user agent and output device support approximately the sRGB gamut or more.
- p3The user agent and output device support approximately the DCI-P3 gamut or more.
- rec2020The user agent and output device support approximately the ITU-R BT.2020 gamut or more.
dynamic-range
- highThe user agent and output device support high dynamic range.
- standardEither the user agent or the output device does not support high dynamic range.
inverted-colors
- noneColors have not been inverted.
- invertedColors have been inverted.
Interaction
pointer
- noneThe primary input mechanism does not include a pointing device.
- coarseThe primary input mechanism includes a pointing device of limited accuracy.
- fineThe primary input mechanism includes an accurate pointing device.
hover
- noneThe primary input mechanism can not (conveniently) hover over elements.
- hoverThe primary input mechanism can conveniently hover over elements.
any-hover
- noneNo input mechanism can (conveniently) hover over elements.
- hoverAt least one input mechanism can conveniently hover over elements.
any-pointer
- noneNo input mechanism includes a pointing device.
- coarseAt least one input mechanism includes a pointing device of limited accuracy.
- fineAt least one input mechanism includes an accurate pointing device.
nav-controls
- The user agent does not provide any obviously discoverable navigation controls.
- The user agent provides navigation controls.
Video
video-color-gamut
- srgbThe output device's video plane supports approximately the sRGB gamut or more.
- p3The output device's video plane supports approximately the DCI-P3 gamut or more.
- rec2020The output device's video plane supports approximately the ITU-R BT.2020 gamut or more.
video-dynamic-range
- highThe user agent and output device's video plane support high dynamic range.
- standardEither the user agent or the output device's video plane does not support high dynamic range.
Scripting
scripting
- enabledScripting is enabled for the document's lifetime.
- initial-onlyScripting is enabled only during the initial page load.
- noneScripting is either disabled or unsupported.
User Preference
prefers-reduced-motion
- no-preferenceNo preference.
- reduceThe user prefers motion to be reduced.
prefers-reduced-transparency
- no-preferenceNo preference.
- reduceThe user prefers transparency effects to be reduced.
prefers-contrast
- no-preferenceNo preference.
- lessThe user prefers a lesser contrast level.
- moreThe user prefers a greater contrast level.
- customThe user wants to use some set of colors.
forced-colors
- activeColors are restricted.
- noneColors are unrestricted.
prefers-color-scheme
- lightThe user prefers a light color scheme.
- darkThe user prefers a dark color scheme.
prefers-reduced-data
- no-preferenceNo preference.
- reduceThe user prefers lightweight alternate contents.
Credits
Much of the text in this page is derived from the corresponding [W3C document].
See also [User Agent] for a JavaScript-powered equivalent.