css - 如何使自定义 CSS 光标与视网膜兼容？

Question

我想知道如何在视网膜显示器上的 web 应用程序中使用自定义光标。我知道通常情况下，由于比例因子，图像将以正常大小的两倍显示，并且在使您的网站与视网膜显示器兼容时，您必须拍摄 2 倍比例的图像，并设置其浏览器内渲染宽度和高度为实际尺寸的一半。由于游标没有大小属性​​（据我所知），我如何确保以尽可能高的保真度呈现游标？

谢谢。

Answer 1

我非常喜欢这里提出的通用解决方案，尤其是作者记得针对所有可以在配备 Retina Display 的 Macbook Pro 上运行的浏览器这一事实。

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    /*your hi-res cursor styling*/
}

我很好奇在相同的硬件（使用 Bootcamp 或 Parallels 等）上运行时这是否能在 Windows 中正常工作