是否有用于检测 Windows 的 CSS 媒体查询?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8493589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS media query to detect Windows?
提问by colmtuite
I want to specify two slightly different background colors, one for Mac OS, one for Windows.
我想指定两种略有不同的背景颜色,一种用于 Mac OS,一种用于 Windows。
回答by Ariona Rian
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 :
没有属性来指定用于查看网页的操作系统,但您可以使用 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);
got it?, now you can play with document.write
to write download stylesheet for specific Operating system. :)
明白了吗?,现在您可以document.write
为特定的操作系统编写下载样式表了。:)
another example, i assumed that you are using jquery.
另一个例子,我假设你正在使用 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)
}
回答by zainengineer
it is available in the latest mozilla version.
它在最新的 mozilla 版本中可用。
-moz-os-version provides following values:
-moz-os-version 提供以下值:
- windows-xp
- windows-vista
- windows-win7
- windows-win8
- 视窗-xp
- 视窗远景
- 窗户-win7
- 窗户-win8
support is limited https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
支持有限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;
}
}
回答by Jeff Clayton
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.
旧版本的 Firefox 也可以检测窗口(对于那些不使用自动更新的用户)并且使用版本 4 或更新版本。它更基本,不说明版本,只说明您在 Windows 中的事实。我创建了这个来测试一段时间,因为我很好奇。
@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
这也涵盖在https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
回答by Marc B
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.
在 CSS 中,不可能。最多有一个@media
过滤器,因此您可以针对移动设备与桌面设备,但没有@os
类型过滤器。
You can achieve it with IE's conditional tags:
您可以使用 IE 的条件标签来实现:
<link rel="stylesheet" href="everyone.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Put the mac-specific styles into the 'everyone' css, and then override whatever's necessary in the IE version.
将特定于 mac 的样式放入 'everyone' css,然后覆盖 IE 版本中所需的任何内容。
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.
当然,如果您的用户使用的是(古老的)IE for Mac 版本,但应该涵盖所有现代用户,这将失败。