0

我想根据用户使用的操作系统显示不同的文本。我有 CSS 浏览器选择器上的代码（来自这里：http ://rafael.adm.br/css_browser_selector/ ），但我不确定如何根据操作系统显示某些文本。

我知道我必须在 CSS 样式表中定义 Windows、Linux、Mac 等操作系统：

.win.chrome .example{
...
}

我想知道如何在 HTML 中显示 if windows、if linux 等的不同值...

4

3 回答 3

1

在 HTML 中包含所有变体，然后使用 CSS 选择器将它们全部display: none生成，除了“正确”字符串，您可以创建display: block或display: inline根据需要创建它们。

请参阅MDN 文档display:。

编辑您链接到的 JS 将其类添加到文档的根元素中，即<html>，因此任何规则开始html.win只会在页面在 Windows 中加载时匹配。然后，您需要将类添加到您自己的内容中，告诉它哪些操作系统应该显示该特定元素。例如：

HTML：

<div class="win_only_block">You are running Windows!</div>
<div class="mac_only_block">You are running MacOS!</div>

CSS：

/* Hide all the switchable blocks by default */
.win_only_block, .mac_only_block { display: none; }

/* Display the elements for the current OS (rule is more specific so will take precedence) */
html.win .win_only_block { display: block; }
html.mac .mac_only_block { display: block; }
于 2013-07-17T02:00:18.350 回答
1

我实际上从未使用过这个 css 选择器，但是为什么不根据操作系统更改“显示”样式属性值呢？

.win .example {
  display:none;
}

.ie7 .example {
  display:block;
}

[...]

于 2013-07-17T02:01:33.333 回答
0

使用 UA 字符串来确定操作系统是有缺陷的，但如果你不关心这一点，那很好。如果您使用所需的不同文本字符串定义对象，则可以将元素的内容替换为适当的字符串：

<script>
  function detectOS() {
    // use UA string to detect the OS, it will be wrong sometimes
    // return mac, win, linux, symbian, palm, ... unknown
  }

  function updateText(id) {
    var text = {
      mac: 'macs suck',
      win: 'windows blows',
      linux: 'linux loses',
      symbian: 'symbian rocks',
      ...
      unknown: 'damn…'
    }

    var el = document.getElementById(id);
    var s = text[detectOS()];

    if (typeof el.textContent == 'string') {
      el.textContent = s;

    } else if (typeof el.innerText == 'string') {
      el.innerText = s;

    } else if (typeof el.innerHTML == 'string') {
      el.innerHTML = s;
    }
  }
</script>

并且有一个函数失败的默认字符串。无需在样式表中定义任何内容或包含多个冗余元素。

于 2013-07-17T02:54:48.493 回答