检查显示是否支持 JavaScript 中的 HDR（高动态范围）颜色？

Question

是否可以在 JavaScript 中检测浏览器的显示器是否支持 HDR？

当访问者使用 HDR 显示器时，我需要在网页上显示 HDR 证书，但我已向客户表示这可能是不可能的。我们已经能够嵌入支持 HDR 的视频，并且可以在 Windows 版 Chrome 上正确播放。

到目前为止，在我的研究中，我没有发现检测这种能力的方法。

我发现的最接近的是Screen.colorDepth API

Answer 1

现代的方法是使用matchMedia()和动态范围 @media查询：

console.log("SDR:", window.matchMedia("(dynamic-range: standard)").matches)
console.log("HDR:", window.matchMedia("(dynamic-range: high)").matches)