HTML开发本身不依赖HDR显示器，但真实HDR输出需视频或WebGL2 canvas配合系统HDR模式及完整链路支持，开发可无HDR屏，验证必须有。
HTML开发本身不依赖HDR显示器
HTML 是标记语言，浏览器渲染页面时并不主动读取显示器的 HDR 能力；display: flex、background-color 或 canvas 绘图等行为，无论显示器是否支持 HDR，都能正常运行。所谓“HTML 支持 HDR”，实际是指：在特定条件下，网页内容能**输出 HDR 信号**，且被系统、浏览器、显卡、线缆、显示器整条链路识别并正确呈现——这和写 HTML 代码本身无关，而取决于后续的媒体层实现。
只有 <video></video> 和 <canvas></canvas> 可能触发 HDR 渲染路径
普通 HTML 元素（如 div、img）始终走 SDR 渲染管线，即使你用 color: #ff00ff 写出超亮色，也不会突破 sRGB 范围。真正可能进入 HDR 流程的只有两个场景：
-
<video></video>播放带有transferFunction="pq"或colorPrimaries="bt2020"的 HEVC/H.265 HDR 视频，且浏览器支持mediaCapabilities.decodingInfo()中的hdr标志 -
<canvas></canvas>使用context = canvas.getContext('webgl2', { colorSpace: 'display-p3' })或启用EXT_color_buffer_half_float扩展，在支持 Display P3 / BT.2020 色域的设备上配合系统级 HDR 模式（如 Windows HDR 开关）才可能输出 HDR 像素
开发阶段无需 HDR 显示器，但验证必须有
你在普通笔记本上写 <video src="demo_hdr.mp4"></video> 完全没问题，浏览器也会解码、播放、甚至报告 video.videoHeight 正常——但你完全无法判断它是否真以 PQ 曲线输出、峰值亮度是否达 1000nits。常见误判现象包括：
- Windows 开启 HDR 后，
matchMedia('(dynamic-range: high)').matches返回true，但视频仍按 SDR 显示（因驱动未透传元数据） - macOS Safari 声称支持
display-p3，但若显示器仅支持 sRGB，canvas的colorSpace会被静默降级，无任何报错 - Chrome 117+ 在 HDR 模式下默认对
<img>强制做色调映射，导致本应鲜艳的 P3 图片反而发灰
真正需要关注的是色彩空间声明与元数据传递
比起硬件，更关键的是告诉浏览器“这段内容是什么空间”。实操要点：
- 视频文件必须内嵌标准 HDR 元数据（如 CTA-861-G），用
ffprobe -v quiet -show_entries stream_tags=cm,mdcv,clli demo.mp4验证是否存在mdcv（Mastering Display Color Volume） - WebGL2
canvas初始化时传入{ colorSpace: 'display-p3' }，但需提前检查HTMLCanvasElement.prototype.getContext是否返回非 null，否则 fallback 到srgb - 避免在 CSS 中对 HDR 视频容器设置
filter: brightness(1.2)—— 这会强制退回到 SDR 渲染管线，HDR 信息丢失
没有 HDR 显示器也能开发，但只要涉及真实 HDR 输出，最终必须在开启系统 HDR 模式的 Windows PC 或 macOS 设备上，用专业探头或至少两台显示器横向比对亮度/色域表现。否则你写的 colorSpace: 'rec2020' 只是一行不会发光的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
