媒体特性查询测试器

CSS 媒体特性查询（如 prefers-color-scheme、hover、pointer）是 CSS 媒体查询规范的一部分，允许网页根据用户设备的能力、偏好和显示属性来应用不同的样式。在 JavaScript 中，可以通过 window.matchMedia() 方法检测这些特性，从而动态调整页面行为和样式。

prefers-color-scheme 用于检测用户是否偏好深色（dark）或浅色（light）主题。这在实现暗黑模式时非常重要。JavaScript 检测方式：
window.matchMedia('(prefers-color-scheme: dark)').matches → 返回 true 表示用户偏好深色模式。同时建议监听 change 事件以实时响应用户切换主题。

该特性检测用户是否在操作系统层面开启了"减少动画"设置。如果 window.matchMedia('(prefers-reduced-motion: reduce)').matches 返回 true，表示用户希望减少或禁用非必要的动画效果。这对于前庭功能障碍患者、注意力障碍人群或偏好简洁体验的用户非常重要。开发者应尊重此偏好，减少或关闭装饰性动画。

使用 matchMedia 返回的 MediaQueryList 对象，通过 addEventListener('change', callback) 监听变化。例如：当用户在 macOS 上切换深色/浅色模式时，prefers-color-scheme 的 change 事件会被触发，你可以在回调中更新页面主题。

hover 检测主要输入设备是否支持悬停（如鼠标支持悬停，触摸屏通常不支持）。any-hover 检测任意连接的输入设备是否支持悬停。例如，一台连接了鼠标的平板电脑：hover: none 可能为 true（主要设备触摸屏不支持悬停），但 any-hover: hover 也为 true（因为鼠标支持悬停）。

使用 window.matchMedia('(min-resolution: 2dppx)').matches 或 window.devicePixelRatio >= 2。前者是 CSS 媒体特性方式，后者是 JavaScript 直接读取设备像素比。两者都能有效判断是否为高分屏。

forced-colors: active 表示用户启用了强制颜色模式（如 Windows 高对比度模式），此时浏览器会覆盖网页颜色。inverted-colors: inverted 表示用户启用了颜色反转（常见于辅助功能）。开发者可据此调整样式，确保在这些模式下页面仍然可用。

本工具使用浏览器原生 window.matchMedia() API 进行检测，结果与浏览器实际解析结果一致。标注"可能不支持"的特性表示该媒体特性在部分浏览器中尚未实现或仍在实验阶段。工具会实时监听变化，当你在操作系统中切换设置（如深色模式）或在 DevTools 中模拟时，结果会即时更新。