Finds a list of all active media queries supported by your browser. Will show you exactly what matches, plus it will respond to changes.
- Media Type - The output device type.
- any-hover - Can the user hover over elements? This can match multiple queries.
- any-pointer - Is there a pointing device? How accurate is it? This can match multiple queries.
- aspect-ratio - The width-to-height aspect ratio of the viewport. This is converted to a decimal number, e.g. 16/9 becomes 1.77778.
- color - Number of bits of color.
- color-gamut - Color range supported for output.
- color-index - Number of indexed colors for display.
- device-aspect-ratio - DEPRECATED - Width-to-height aspect ratio of output.
- device-height - DEPRECATED - Output device height.
- device-posture - If viewport is flat or folded.
- device-width - DEPRECATED - Output device width.
- display-mode - How the application is being displayed.
- dynamic-range - The combination of brightness, contrast ratio, and color depth.
- forced-colors - Does the user agent restrict colors?
- grid - Does the device use a grid or a bitmap screen?
- height - The output device height.
- hover - Can the user hover over elements?
- inverted-colors - Is the user agent or OS inverting colors?
- monochrome - Bits per pixel in the device's monochrome frame buffer.
- orientation - Viewport orientation.
- overflow-block - How does the device handle overflows along the block axis?
- overflow-inline - Can content overflowing the inline axis be scrolled?
- pointer - Is the input a pointing device? How accurate is it?
- prefers-color-scheme - Does the user prefer a light or dark color scheme?
- prefers-contrast - Did the user change the amount of contrast between adjacent colors?
- prefers-reduced-data - Has the user requested web content that consumes less bandwidth?
- prefers-reduced-motion - Does the user prefer less motion?
- prefers-reduced-transparency - Does the user want less transparency or translucent layer effects?
- resolution - Output pixel density.
- scan - Is the display progressive or interlaced?
- scripting - Is JavaScript enabled?
- shape - Distinguish regular and round displays.
- update - How frequently can the device modify the appearance of content.
- video-dynamic-range - Combination of brightness, contrast ratio, and color depth supported by video.
- width - Width of the viewport, including scrollbar.
The repository contains a file called queries.json that drives everything. Update it and run `make` to build the HTML and the README using Node.js.