Is there a CSS media query to detect Windows?

综合技术 2017-11-01

I want to specify two slightly different background colors, one for Mac OS, one for Windows.

Problem courtesy of: colmtuite

Solution

there is no property to specify OS used to view webpage, but you can detect it with javascript, here is some example for detecting Operating system :

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);

got it?, now you can play with document.write
to write download stylesheet for specific Operating system. 🙂

another example, i assumed that you are using 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)
}

Solution courtesy of: Ariona Rian

Discussion

Older versions of Firefox could also detect windows (for those who are not using autoupdate) and are using version 4 or newer. It is more basic and does not tell the version, just the fact you are in windows. I created this one for testing a while back because I was curious.

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

this is also covered in https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Discussion courtesy of: Jeff Clayton

In CSS, not possible. At most there's a @media
filter so you can target mobile devices v.s. desktop devices, but there's no @os
type filter.

You can achieve it with IE's conditional tags:



Put the mac-specific styles into the 'everyone' css, and then override whatever's necessary in the IE version.

Of course, this will fail if you get a user who's on an (ancient) IE for Mac version, but should cover all modern users.

Discussion courtesy of: Marc B

it is available in the latest mozilla version.

-moz-os-version provides following values:

  • windows-xp
  • windows-vista
  • windows-win7
  • windows-win8

support is limited 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;
    }
}

Discussion courtesy of: zainengineer

This recipe can be found in it's original form on Stack Over Flow
.

您可能感兴趣的

研究人员发现NotPetya勒索软件“疫苗”:新建一个只读文件即可预防... 继 WannaCry 之后,利用 NSA“永恒之蓝”漏洞的新型 Petya 勒索软件再次引爆了网络。 万幸的是,网络安全人员 Amit Serper 已经发现了预防计算机被 Petya(含 NotPetya / SortaPetya / Petna)感染的方法。 据悉,Petya ...
Passing Google’s Above-the-Fold CSS A great way to measure web performance for mobile and desktop is to use Google’s PageSpeed Insights tool. It fetches a URL and returns a score that fa...
BUF早餐铺 | 利用Meltdown和Spectre漏洞的恶意程序开始出现;Windows Def... 各位 Buffer 早上好,今天是 2018 年 2 月 2 日星期五。离春节还有半个月的时间,小编都已经感受到过年的气氛了~当然,对于部分害怕被催婚的童鞋来说可能是“春劫”,嘿嘿。快来看看今天的早餐内容吧:利用meltdown和spectre漏洞的恶意程序开始出现;Windows Defender...
List of Useful libraries for your next React Web A... I have list down various libraries that you can use for your next react project. You can find all these libraries integrated in a sample React p...
Best Practices With CSS Grid Layout An increasingly common question — now that people are using CSS Grid Layout in production — seems to be “What are the best practices?” The short...