# HDR Test

> 這台螢幕是不是真 HDR？dynamic-range 和 video-dynamic-range 分開列、P3 對 sRGB 色塊、亮度階梯會跟著視窗更新。系統開關、面板本事、瀏覽器回報是三件事。

- URL: https://bytescope.dev/zh-Hant/hdr-test/
- Locale: zh-Hant · Also: [en](https://bytescope.dev/en/hdr-test.md) · [ja](https://bytescope.dev/ja/hdr-test.md)
- Runs: 不會上傳。只讀這個視窗的媒體查詢，用 CSS 和 canvas 畫測試圖。
- Requires: Any modern browser. Whether the samples actually show as HDR depends on the display, the operating system and the browser's HDR video support, which the page reports.
- Updated: 2026-09-08

## What it does

這一頁只答一個問題：你眼前這塊螢幕，是不是真的 HDR。什麼都不會上傳。頁面掛上去之後，才用 `matchMedia` 讀 `dynamic-range`、`video-dynamic-range`、`color-gamut`，再用 `CSS.supports` 試廣色域的寫法，並畫出亮度階梯和 P3 對 sRGB 的色塊。視窗拖到另一台螢幕，上面的數字會跟著變。

### 三件不同的事

系統的 HDR 開關、面板能到多亮、這個瀏覽器回報什麼，不是同一件事。面板做得到 HDR，系統卻可能關著；瀏覽器也可能對峰值差不多只比 SDR 亮一點的螢幕回 `dynamic-range: high`。這一頁只看得到，瀏覽器對「這個視窗」怎麼說。

### dynamic-range 和 video-dynamic-range

`(dynamic-range: high)` 是這個頁面的輸出路徑。`(video-dynamic-range: high)` 是影片平面用的，不是同一個 CSS 媒體查詢的別名。筆電有時只中一個。所以分開列。

### 故意不附 HDR 影片

這一頁沒有 HDR10 樣本。站台靜態匯出已經夠大，再塞一支影片 Cloudflare 部署會炸掉。而且這裡沒有 `mediainfo`，沒辦法確認檔案真的帶 HDR10 metadata。沒驗證就標 HDR，比沒附還糟。要測播放，把你手上的 HDR 檔丟進編解碼檢查或系統播放器，或看你知道是 HDR 的串流。這裡的測試圖只有 CSS 和 canvas。

## Limits

Does not calibrate the display or measure peak brightness; it plays HDR samples and reports what the browser detects.

## Machine output

Copy JSON copies an envelope `{ tool, url, generatedAt, userAgentHint, result }`. `tool` is `"hdr-test"`; `result` is what the browser reported via matchMedia / CSS.supports / screen numbers — not a measurement of the attached panel.

- `browserReportsHdr` (boolean | null) — `matchMedia('(dynamic-range: high)')`. `null` = API missing or threw.
- `browserReportsHdrVideo` (boolean | null) — `matchMedia('(video-dynamic-range: high)')`. `null` = API missing or threw.
- `dynamicRangeStandard` (boolean | null) — `matchMedia('(dynamic-range: standard)')`. `null` = API missing or threw.
- `videoDynamicRangeStandard` (boolean | null) — `matchMedia('(video-dynamic-range: standard)')`. `null` = API missing or threw.
- `colorGamutSrgb` (boolean | null) — `matchMedia('(color-gamut: srgb)')`. `null` = API missing or threw.
- `colorGamutP3` (boolean | null) — `matchMedia('(color-gamut: p3)')`. `null` = API missing or threw.
- `colorGamutRec2020` (boolean | null) — `matchMedia('(color-gamut: rec2020)')`. `null` = API missing or threw.
- `inferredColorGamut` (string) — Widest matching color-gamut token: `"srgb"` | `"p3"` | `"rec2020"` | `"unknown"`. `"unknown"` = nothing matched.
- `colorBits8` (boolean | null) — `matchMedia('(color: 8)')` (or equivalent bit-depth query). `null` = API missing or threw.
- `colorBits10` (boolean | null) — 10-bit color query. `null` = API missing or threw.
- `colorBits12` (boolean | null) — 12-bit color query. `null` = API missing or threw.
- `colorDepth` (number | null) — `window.screen.colorDepth`. `null` = not read.
- `devicePixelRatio` (number | null) — `window.devicePixelRatio`. `null` = not read.
- `supportsDisplayP3` (boolean | null) — `CSS.supports` of `color(display-p3 …)` syntax — not the display gamut. `null` = CSS.supports missing or threw.
- `supportsOklch` (boolean | null) — `CSS.supports` of oklch syntax. `null` = CSS.supports missing or threw.
- `supportsRec2020` (boolean | null) — `CSS.supports` of rec2020 color syntax. `null` = CSS.supports missing or threw.
- `browserHdrVerdict` (string) — Fold of the media-query flags: `"hdr"` | `"wide-gamut-only"` | `"sdr"` | `"unknown"`. `"hdr"` means the browser reported `(dynamic-range: high)`, not that the panel was measured as HDR.
- `extendedRangeCssColor` (string | null) — Extended-range `color()` that `CSS.supports` accepted. `null` = none accepted.

## FAQ

### 我的螢幕是 HDR 嗎？

這一頁講的是「瀏覽器」怎麼看這個視窗現在的輸出路徑。`dynamic-range: high` 代表瀏覽器認為這條路徑做得到 HDR。它不測 nits，也不能證明系統 HDR 開關有開。有兩台螢幕就把視窗拖過去——答案是跟著那台螢幕走的。

### 為什麼系統 HDR 開關、面板、瀏覽器是三件不同的事？

面板是硬體：峰值亮度、區域調光、能不能走 PQ 或 HLG。系統開關決定桌面要不要進 HDR 模式。瀏覽器再對「這個」視窗回報媒體查詢。三個可能互相對不上。這一頁的「是」，是瀏覽器說是，不是色彩計量過。

### dynamic-range: high 到底是什麼意思？

`dynamic-range: high` 代表瀏覽器認為目前輸出路徑支援 HDR。不是說面板峰值夠亮，也不是說 SDR 內容會突然變好看。`(dynamic-range: standard)` 在 HDR 螢幕上也會中，因為它們還是播得了 SDR——那不是「只有 SDR」的旗標。

### 為什麼沒有附 HDR 影片樣本？

兩個都很實際。匯出後的站台已經大約 275 MB，上次部署還把 WASM 丟到 CDN 才塞得進 Cloudflare；再塞 HDR 影片部署會失敗。而且這裡沒裝 `mediainfo`，沒辦法確認附上的片子真的帶 HDR10 metadata。請用你手上的 HDR 檔，或你知道是 HDR 的串流來測播放。這一頁不會把隨便一個 mp4 說成 HDR10。

### 視窗一移，數字就變，是壞掉了嗎？

每個 `matchMedia` 都有訂 `change`。真正算數的是視窗坐落的那條輸出路徑，所以拖到另一台螢幕時，色域、動態範圍、每通道位元數本來就該更新。那是這一頁要做的事，不是故障。

### P3 和 sRGB 色塊看起來一樣。我的螢幕不是廣色域？

看起來一樣，多半是這個視窗被卡在 sRGB：面板本身是 sRGB、系統沒開廣色域，或瀏覽器沒把 Display P3 送出去。紅跟綠看得出差別，才是廣色域的訊號。`CSS.supports('color', 'color(display-p3 1 0 0)')` 只代表引擎看得懂這種寫法，不是在量螢幕。

## Related tools

- [Display & Monitor Test](https://bytescope.dev/zh-Hant/screen-test.md) — 壞點、banding、殘影、實測更新率。同一家人。
- [Codec Check](https://bytescope.dev/zh-Hant/codec-check.md) — 這個瀏覽器解不解得了 HEVC、AV1、VP9，含 10-bit HDR 設定。
- [My Computer Specs](https://bytescope.dev/zh-Hant/my-computer-specs.md) — 一次看這個瀏覽器用的顯示卡、CPU 執行緒數、記憶體大小，還有硬體加速有沒有開。