仅对 Linux Chrome 应用 css，而不对 Windows Chrome 应用 css

Apply css only for linux chrome but not for windows chrome

本文关键字：应用 Chrome css Windows 仅对 Linux      更新时间：2023-09-26

是仅将css应用于linux chrome的任何类型的方法。目前我正在使用以下代码

   @media screen and (-webkit-min-device-pixel-ratio:0) { //css code  }

但这里的问题是它同时适用于Linux和Windows Chrome。

谢谢

我能想到的唯一方法（我不喜欢它）是使用 JavaScript（正如您在这个问题上标记javascript）来检测用户代理字符串中的"Linux"，然后在 body 或类似中添加一个类以激活仅限 Linux 的样式; 或者相反，仅在不使用 Linux 时才添加类。（但我倾向于前者。

if (/'blinux'b/i.test(navigator.userAgent)) {
    document.body.className += " linux";
}

或

if (!/'blinux'b/i.test(navigator.userAgent)) {
    document.body.className += " not-linux";
}

然后在定义相关样式时使用.linux或.not-linux祖先。

您可以使用

平台检测库，例如 此处的平台 https://github.com/bestiejs/platform.js/然后在文档加载时将平台名称作为类添加到 html body 标记中。然后，您可以添加一个 css 规则来查找此类。

如果你使用的是jquery，你可以这样做：

$( document ).ready(function() {
    $('body').addClass(platform.name)
});

然后在 css 中你可以这样做：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .linux .some-element-class{
        background: blue;
    }
}

此示例中 platform.name 的值是"linux"

相关文章：