Is there a CSS media query to detect Windows?

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
.

稿源:CSS3 Recipes - The solution to all your Style problems (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Is there a CSS media query to detect Windows?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录