如何验证我的设备是否支持 HDR 显示呢？
此处调用浏览器 api ，示例代码
var SDRSupport = window.matchMedia("(dynamic-range: standard)").matches
var HDRSupport = window.matchMedia("(dynamic-range: high)").matches以下是你当前设备的支持情况
如果 HDR "✓" 则说明您当前设备支持高动态范围的显示，但是但是并不代表您能正常查看 HDR 图片，在 IOS (iPad OS) 的 safari 浏览器中 HDR 也是会打 "✓" 但目前 safari 并不支持正确的呈现 HDR 图片，您可以选择保存图片到相册中查看 HDR 效果。
| SDR | |
| HDR |
如何验证我的设备支持 HDR 的类型？
这是一个从 10000nit 到 400nit 的带15个圆点的渐变，其中最右侧的圆点应为1000nit
如果你什么都没看见，说明图片不被识别（类型0），或整张图片被当作比白更白的内容“过曝”了（类型2）
如果你看到最左边的圆点是和背景相同的白色（周围的渐变略有一点点灰），到最右边变更灰，那么表示此时你并没有看到HDR效果，HDR内容可能被当作SDR来处理了（类型1）
如果你看到最左边是很刺眼的、比背景更白的白色，那么起码你有了HDR效果
在有HDR的前提下，如果你看到渐变在中间处才开始向右逐渐变暗，那么说明你看到了约1000nit的峰值亮度，且超出的部分由于“顶不上去”而裁切（类型3）
在有HDR的前提下，你能看到所有圆点和整个渐变，说明此时你的环境将超级亮的内容（超过了4000nit）映射到了能正常显示的范围内（类型4）
在有HDR的前提下，你看到渐变消失的地方比较突然，那么可能此时的处理逻辑没有一个柔和的 rolloff，而是比较硬地切（Clip）掉了超过峰值亮度的区域（类型5）
如果你：
缩放整个页面，改变了HDR内容的显示面积
停留时间变长
调整了设备的显示亮度，渐变消失的地方在左右移动，说明你的设备正在动态调整峰值的亮度
Apple 带 EDR 的设备可以通过调整屏幕亮度来改变 Headroom 而产生此变化
类型0：完全不支持avif格式，所以你什么也看不见，甚至会有 红叉/黑屏/问号 等标识
类型1：支持了avif格式，但不全面，但没能识别它的色彩空间信息，所以被统一作为SDR内容来处理了
类型2：支持了avif格式，也识别了其HDR的特性，但把它按“完全超过了屏幕显示能力”的方式进行了“裁切”处理，按理说 diffuse white 亮度以下的内容就可以看见
类型3：正确处理了HDR avif，但以“过曝”的方式处理了超过系统峰值亮度的内容，并带有适当的Roll-off
类型4：正确处理了HDR avif，但以整体映射的方式处理了超过系统峰值亮度的内容
类型5：正确处理了HDR avif，但以“过曝”的方式处理了超过系统峰值亮度的内容，并没有 Roll-off，直接硬裁切
目前已知可正常查看 HDR 图片的设备清单
欢迎补充！
部分内容转载自
