Question

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

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

.win.chrome .example{
...
}

我想知道如何在HTML中我可以显示if窗口的不同值，如果是linux等...

Answer 1

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

请参阅MDN docs on 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; }

Answer 2

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

.win .example {
  display:none;
}

.ie7 .example {
  display:block;
}

[...]

Answer 3

使用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>

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

根据操作系统显示不同的文本

3 个答案: