Question

我想指定两种略有不同的背景颜色，一种用于Mac OS，一种用于Windows。

Answer 1

没有用于指定用于查看网页的操作系统的属性，但您可以使用javascript检测它，这是检测操作系统的一些示例：

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

console.log('Your OS: '+OSName);

得到了吗？现在您可以使用document.write来编写特定操作系统的下载样式表。：）

另一个例子，我假设你正在使用jquery。

if (navigator.appVersion.indexOf("Win")!=-1) 
{
  $(body).css('background','#333');
} else {
  $(body).css('background','#000'); // this will style body for other OS (Linux/Mac)
}

Answer 2

它以最新的mozilla版本提供。

-moz-os-version提供以下值：

windows-xp
Windows的Vista的
窗口-WIN7
窗口-win8的

支持有限https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media (-moz-os-version: windows-xp), (-moz-os-version: windows-vista),
(-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
    body{
        background-color: white;
    }
}

Answer 3

旧版本的Firefox也可以检测窗口（对于那些没有使用自动更新的用户）并使用版本4或更高版本。它更基本，不告诉版本，只是你在Windows中的事实。我创建了一个用于测试的，因为我很好奇。

@media screen and (-moz-windows-theme) {
    body {
        background-color: white;
    }
}

这也包含在https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

中

Answer 4

在CSS中，不可能。最多只有一个@media过滤器，因此您可以定位移动设备v。桌面设备，但没有@os类型过滤器。

您可以使用IE的条件标签来实现它：

<link rel="stylesheet" href="everyone.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

将特定于mac的样式放入“everyone”css中，然后覆盖IE版本中所需的任何内容。

当然，如果你有一个（古老的）IE for Mac版本的用户，这将失败，但应覆盖所有现代用户。

是否有CSS媒体查询来检测Windows？

4 个答案: