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

Question

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

谢谢。

Answer 1

我非常喜欢提出的通用解决方案 here ，尤其是作者记得针对所有可以在配备 Retina 显示屏的 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 中正常工作