# dynamic_range

> Whether the display and browser support high dynamic range (HDR), from the dynamic-range media query: high or standard.

Source: https://whiskerjs.com/signals/dynamic-range/ (last updated 2026-10-26)

**dynamic_range at a glance (from the library code, signalsVersion 9)**

| Field | Value |
| --- | --- |
| Component name | `dynamic_range` |
| In the visitorId | yes |
| structuredId group | [prefs (display and accessibility preferences)](https://whiskerjs.com/docs/identifiers/#structuredid) |
| Hashing | plain value; a digest only when longer than 128 characters or not printable ASCII |
| Excluded under | no browser class |
| Inner timeout | 1000 ms |
| Added in | [signalsVersion 1](https://whiskerjs.com/whats-new/) |

> **In plain words:**
>
> Some screens can show much brighter highlights and deeper shadows than others; this is called high dynamic range, or HDR. Browsers let pages ask whether the current screen supports it. WhiskerJS records the answer, `high` or `standard`.

## What it reads

The CSS `dynamic-range` media feature through `window.matchMedia()`.

## How the technique works

| Order | Query | Value reported |
| --- | --- | --- |
| 1 | `(dynamic-range: high)` | `high` |
| 2 | `(dynamic-range: standard)` | `standard` |

The first match is reported. An HDR display matches both, so `high` is asked first. If neither matches, the component is `unavailable` with `no_match`.

## Why it helps

It separates HDR-capable setups (many recent phones and laptops, some monitors with HDR turned on) from the rest. Two values make it a weak signal alone, but it is cheap and rarely changes.

On your server, read it together with the other four preference components. They share the `prefs` part of the [structuredId](https://whiskerjs.com/glossary/#structured-id), so a result where only that part moved usually means a display or accessibility setting changed, not a different device. See [Comparing two results](https://whiskerjs.com/docs/identifiers/#comparing-two-results).

## Stability

Stable for a given display and setting. It changes with the monitor the window is on and, on systems where HDR is an operating system switch, with that switch.

On laptops that can drive an external HDR monitor, the value can differ between the built-in screen and the external one. If you see `dynamic_range` flip together with [`color_gamut`](https://whiskerjs.com/signals/color-gamut/) while everything else holds, a monitor change is the likely cause.

## Browser support and what blocks it

Current Chromium browsers ([Chrome](https://whiskerjs.com/browsers/chrome-desktop/), [Edge](https://whiskerjs.com/browsers/edge/)), [Safari](https://whiskerjs.com/browsers/safari-macos/) and [iOS browsers](https://whiskerjs.com/browsers/safari-ios/) answer it; browser versions that do not know the feature report `no_match`. Check [Firefox](https://whiskerjs.com/browsers/firefox/) results on your own traffic. No browser class excludes it.

## Privacy

A display capability, not a personal preference. Shared by everyone with the same kind of screen and setting.

## How WhiskerJS handles noise and failures

| Status | ruleId | When |
| --- | --- | --- |
| `ok` |   | `high` or `standard` |
| `unavailable` | `no_api` | no `matchMedia` |
| `unavailable` | `no_match` | neither query matched |
| `blocked` | `threw`, `security_error` | `matchMedia` throws |
| `excluded` | `caller_excluded` | you excluded it |
| `timed_out` | `timeout`, `aborted` | budget or abort |

## Example value

All three headless test browsers in the container (Chromium, Firefox, WebKit) reported `standard`.

## Questions and answers

### Does high mean HDR is switched on?

It means the browser reports that the current display can show high dynamic range. On some systems that depends on an HDR setting in the operating system, so switching it changes the value.

### Why only two values?

The dynamic-range media feature only defines high and standard. WhiskerJS asks high first, then standard.

## Related pages

- [color_gamut](https://whiskerjs.com/signals/color-gamut/): The display's colour range.
- [color_depth](https://whiskerjs.com/signals/color-depth/): Bits per pixel.
- [Comparing two results](https://whiskerjs.com/docs/identifiers/#comparing-two-results): A change here moves only the prefs part.