如何在Firefox的userChrome.css与userContent.css中用CSS检测操作系统

可行方案（Firefox专属） #

Firefox提供了专属的媒体查询特性，可直接识别操作系统，完全适配userChrome.css和userContent.css环境，无需JavaScript：

• 匹配Windows系统

@media (-moz-windows) {
  /* 此处编写Windows下的自定义样式 */
  *::after {
    content: "Windows";
  }
}

• 匹配Linux系统

@media (-moz-linux) {
  /* 此处编写Linux下的自定义样式 */
  *::after {
    content: "Linux";
  }
}

• 匹配macOS系统（可选）

@media (-moz-mac) {
  /* 此处编写macOS下的自定义样式 */
  *::after {
    content: "macOS";
  }
}

关于旧失效代码 #

你提到的早年依赖分辨率差异的检测方法已失效，原代码及注释翻译如下：

多年前可使用以下CSS代码区分Linux和Windows，但现已失效：

/* 检测Linux */
@media (min-resolution: 1dpcm) {
  *::after {
    content: "Linux";
  }
}

/* 检测Windows */
@media (min-resolution: 0.001dpcm) {
  *::after {
    content: "Windows";
  }
}

该方法失效的原因是Firefox后续修复了不同系统下分辨率计算的差异，导致原有的分辨率阈值不再能区分系统。

内容的提问来源于stack exchange，提问作者Amazon Dies In Darkness