有 CSS 媒体查询来检测 Windows 吗?

2024-02-11

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


没有属性来指定用于查看网页的操作系统,但您可以使用 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)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

有 CSS 媒体查询来检测 Windows 吗? 的相关文章

  • 如何使用 JavaScript 检测 CSS 变量支持?

    最新版本的 Firefox 支持CSS 变量 http www w3 org TR css variables 但 Chrome IE 和许多其他浏览器没有 应该可以访问 DOM 节点或编写一个小方法来返回浏览器是否支持此功能 但我还没有找
  • 伪元素和 SELECT 标签

    是否select标签允许使用 after选择器是为了在之后创建一个伪元素吗 我在 Mac 上尝试过 Chrome Safari 和 Firefox 但似乎不起作用 这是我使用过的折衷方案 http jsfiddle net pht9d295
  • 严格/过渡 DOCTYPE 之间的浏览器渲染差异

    前段时间我遇到了一个 问题 但我从未深入了解过 希望有人能够照亮它 当我将 DOCTYPE 从严格更改为过渡时 是什么导致某些浏览器 Chrome Opera 和 Safari 以不同方式呈现页面 我知道造成这种情况的一般原因是触发了怪异模
  • css 适用于 Firefox/Chrome,但不适用于 IE

    我有这个 HTML 和 css 在 chrome firefox 中工作正常 但在 IE 上 标题布局超出了位置 并且悬停时未显示子菜单 您能帮忙吗
  • 如何防止 CFDocument 中的内容中间发生分页?

    我使用 cfdocument 标签从 html css 动态生成 PDF 文件 有些内容块我不想跨越多个页面 经过一番搜索后 我发现根据文档支持 page break inside 样式 然而 在我的测试中 声明 page break in
  • 滚动时输入自动完成位置错误(chrome)

    我在输入文本的默认自动完成功能方面遇到了一些麻烦 滚动时它不会相应移动 我希望自动完成文本保留在输入的正下方 有办法做到这一点吗 我在 Chrome 浏览器版本 57 0 2987 133 中发生这种情况 fiddle https jsfi
  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源?

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l
  • 如何适应特定子元素的宽度?

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 如何向 CSS 形状添加偏移轮廓?

    我在创建带有斜角边缘的块时遇到了一些问题 此外我需要一个斜角的边框并稍微偏离主块 问题是这个块可以根据屏幕响应 不知道具体的方法 希望大家帮忙 这就是我现在所做的 box display flex padding 20px height 2
  • jQuery 或 Javascript - 如何禁用窗口滚动而不溢出:隐藏;

    您好 是否可以在不使用的情况下禁用窗口滚动overflow hidden 当我悬停一个元素时 我试过 chat content on mouseenter function document scroll function e if e h
  • Bootstrap 中的旋转字形 / Font Awesome

    我试图让引导站点中的字形在悬停时旋转 除了更改颜色之外 这是我的尝试 http jsfiddle net young greedo17 88g5P http jsfiddle net young greedo17 88g5P 使用此代码 d
  • 使用绝对定位时文本被破坏

    我有一个小挑战 我在 Stack Overflow 上没有找到任何解决方案 这就是我得到的 这就是我想要的 为了产生这个标题效果 我使用绝对位置 我什至不知道我的标题的宽度和高度 因此 使用此解决方案时 大文本会中断 My HTML div
  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 如何处理 Django 中的错误

    我想让我的 django 应用程序尽可能对用户友好 并且我想处理适当的错误并让它推出类似于 javascript 中的警报的错误消息 我想在没有上传文件时执行此操作 因此 当按下上传按钮并且尚未上传任何内容时 将会发出一条警报消息 我的看法
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code

随机推荐