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

Question

我使用具有透明度的 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 选择器。

提前致谢。

Answer 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