Question

我正在为我的应用使用自定义光标。但是OSX中的游标是黑色的，Windows中的游标是白色的。

如果我创建两个游标，一个是白色，一个是黑色，我如何使用CSS基于操作系统切换游标？

.custom-cursor-windows {
    cursor: url('windows-cursor.svg') 0 0, auto;
}

.custom-cursor-mac {
    cursor: url('mac-cursor.svg') 0 0, auto;
}

Answer 1

你会100％要求javascript参与这个。您可以在javascript if语句中使用User Agent字符串来确定要通过js本身回显或设置的CSS类。

Answer 2

我不认为可以使用纯CSS更改它，但您可以使用JavaScript检测操作系统。

以下是一个例子：

if (navigator.appVersion.indexOf("Win")!=-1){
    //change css to win cursor
}
if (navigator.appVersion.indexOf("Mac")!=-1) {
    //change css to mac cursor
}

Answer 3

没有JavaScript，你无法做到这一点。检查操作系统（Windows / Mac）的简便方法是检查window.navigator.platform属性。在您的情况下，一个简单的字符串IndexOf搜索"Mac"应该足以区分这两个系统，而默认为Windows用于Linux等等。

Answer 4

这是一个小提琴：https://jsfiddle.net/v08gg9ep/4/

$( document ).ready(function() {
    var opsys = getOS();
    if(opsys == "Windows"){
        alert("White Curosr");
      $("html").css("cursor: url('windows-cursor.svg') 0 0, auto");
    }else if(opsys == "iOS" || opsys == "Mac OS"){
        alert("White Curosr");
      $("html").css("cursor: url('mac-cursor.svg') 0 0, auto");
    }
});

function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }
  return os;
}

根据操作系统更改自定义光标

4 个答案: