如何通过 css、js、UAS 识别 MS Edge 浏览器 ..？答案

【问题标题】：How to identify MS Edge Browser via css, js, UAS ..?如何通过 css、js、UAS 识别 MS Edge 浏览器 ..？
【发布时间】：2020-03-28 10:42:15
【问题描述】：

我使用具有透明度的 png 作为背景图像，它在任何地方都可以很好地显示 - 除了基于 Chromium 的 MS Edge 版本。我已将 MS Edge 更新到最新版本，使用未更改的 Chromium 版本在不同的机器上测试了网站 - 问题仍然存在，并且仅在基于 Chromium 的 MS Edge 上发生。

因此，唯一的解决方法是禁用 MS Edge 的背景图像 - 为此，我需要能够区分 Chrome 浏览器和基于 Chromium 的 MS Edge 浏览器。到目前为止，我找不到任何可行的解决方案。

有没有人知道如何仅针对基于 Chromium 的 MS Edge 或更一般的 MS Edge 浏览器（包括版本 79 及更高版本）？截至目前，我不在乎这是通过 CSS 还是 JS 实现的，但更喜欢 CSS 选择器。

提前致谢。

【问题讨论】：

让我们退后一步。 PNG究竟有什么问题？可以演示一下吗？
这里已经回答了 -> stackoverflow.com/questions/9847580/…
谢谢@shutupchigo...让它工作

标签： javascript css css-selectors microsoft-edge chromium

【解决方案1】：

由于新版 MS Edge 是 chromium，如果我们使用 CSS 方法来检测浏览器，样式可能也适用于 Chrome 浏览器。

如果你想只针对基于 Chromium 的 MS Edge，我建议你可以使用 JS 方法，请检查以下代码：

<script>
var browser = (function (agent) {
    switch (true) {
        case agent.indexOf("edge") > -1: return "edge";
        case agent.indexOf("edg") > -1: return "chromium based edge";
        case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
        case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
        case agent.indexOf("trident") > -1: return "ie";
        case agent.indexOf("firefox") > -1: return "firefox";
        case agent.indexOf("safari") > -1: return "safari";
        default: return "other";
    }
})(window.navigator.userAgent.toLowerCase());
document.body.innerHTML = window.navigator.userAgent.toLowerCase() + "<br>" + browser;
</script>

新的 Microsoft Edge 浏览器 userAgent 属性如下（userAgent 包含“edg/”值）：

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/80.0.3987.149 safari/537.36 edg/80.0.361.69

【讨论】：