根据您使用的操作系统应用不同的样式表答案

【问题标题】：Apply a different stylesheet depending on the operating system you are using根据您使用的操作系统应用不同的样式表
【发布时间】：2020-07-06 18:59:04
【问题描述】：

我的网站有一些部分，其设计对它们如何看待像素非常敏感。

http://sandhals.ca/

事实上，在我看来，如果您使用的是 MacOS，则悬停的小弹出窗口在上述链接上似乎没问题。但是，它们似乎不适用于 Windows。相反，如果我将像素调整为它们的位置：

http://sandhals.ca/index2/index

他们似乎工作。问题是，如何在我的 HTML 或 CSS 中写入一些内容以根据操作系统调整数字？有什么想法或建议吗？

【问题讨论】：

我得到的错误是：Refused to execute script from 'https://raw.githubusercontent.com/rafaelp/css_browser_selector/master/css_browser_selector.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.自己托管.js

标签： html css macos operating-system frontend

【解决方案1】：

您将需要 Javascript。将此添加到模板底部或加载文档后。您可以根据 body 上的类来设置文档的样式。

<script> 
    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"; 

    document.body.classList.add( OSName);
</script>

【讨论】：

嗨！感谢你的回复！我应该如何在我的 CSS 中利用这个 Javascript 的效果？例如，如果我有一个 <div class="box"></div> 并且我想要在 Windows 上使用 .box{margin-top:10px;} 在 Mac 上使用 .box{margin-top:12px;}，那么它的实现会是什么样的？
.Windows .box{margin-top:10px;} .MacOS .box{margin-top:12px;} 从那里开始就是简单的 CSS。通常使用的操作系统无论如何都不应该影响您网站的外观。以 chrome 为例，在每个操作系统上的行为都应该完全相同
我试过这个，但似乎没有让它工作。使用.Windows .box:hover ~ .box2{...} 之类的东西不起作用吗？我已将脚本放在我的 html 的 <head> 中。