是否有CSS媒體查詢來檢測Windows？

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

在CSS中，不可能。最多有一個@media過濾器，因此您可以將移動設備作爲目標。桌面設備，但沒有@os類型的過濾器。

你可以用IE的條件標籤實現它：

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

把特定MAC的樣式到「大家」的CSS，然後覆蓋任何在IE版本是必要的。

當然，如果您的用戶使用的是（古老的）Mac版IE瀏覽器，但是應覆蓋所有現代用戶，則這會失敗。

Answer 3

它在最新的mozilla版本中可用。

-moz-OS-版本提供以下值：

• 窗口-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 4

老版本的Firefox還可以檢測Windows（對於那些不使用自動更新的用戶）並且使用的是版本4或更新的版本。這是更基本的，並不告訴版本，只是你在Windows中的事實。因爲我很好奇，我之前創建了這個測試。

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

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