js判断浏览器类型与版本

在JavaScript中判断浏览器类型与版本通常可以通过解析navigator.userAgent字符串来实现。navigator.userAgent包含了访问者浏览器的信息，其中包括浏览器名称、版本、渲染引擎等信息。

以下是一个简单的示例代码，用于检测浏览器类型和版本：

function getBrowserInfo() {
    var ua = navigator.userAgent, tem,
    M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return { name: 'IE', version: tem[1] };
    }
    if (M[1] === 'Chrome') {
        tem = ua.match(/\b(OPR|Edge|Brave|Avast Secure Browser)\/(\d+)/);
        if (tem !== null) {
            return { name: tem[1].replace('_', ' '), version: tem[2] };
        }
    }
    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
    tem = ua.match(/version\/(\d+)/i);
    if (tem !== null) {
        M.splice(1, 1, tem[1]);
    }
    return { name: M[0], version: M[1] };
}

var browser = getBrowserInfo();
console.log(browser.name); // 浏览器名称
console.log(browser.version); // 浏览器版本

这段代码首先尝试匹配userAgent字符串中的浏览器标识，然后根据不同的浏览器进行特定的处理。例如，对于IE浏览器，它会查找rv标识来确定版本；对于Chrome浏览器，它会检查是否有其他浏览器的标识（如OPR、Edge等）。

优势：

可以快速地获取用户浏览器的基本信息。
根据不同浏览器的特性，可以进行特定的兼容性处理。

应用场景：

网页布局调整：根据不同浏览器的渲染特性调整CSS样式。
功能支持检测：某些高级功能可能只在特定浏览器中受支持。
兼容性提示：如果用户的浏览器版本过旧，可以提示用户升级浏览器。

注意事项：

userAgent字符串可以被用户或浏览器插件修改，因此这种方法不是100%可靠。
随着浏览器版本的更新，userAgent字符串的格式可能会发生变化，需要定期更新解析代码。
尽量避免使用浏览器检测来决定功能实现，而是使用特性检测（Feature Detection）来确定浏览器是否支持某个功能。

解决方法：

如果遇到userAgent字符串解析不准确的问题，可以更新解析逻辑以匹配最新的浏览器userAgent格式。
使用成熟的库，如bowser或BrowserDetector，这些库提供了更准确和更新频繁的浏览器检测功能。

示例代码使用库：

// 使用bowser库来获取浏览器信息
import bowser from 'bowser';

const browser = bowser.getParser(window.navigator.userAgent);
console.log(browser.getBrowserName()); // 浏览器名称
console.log(browser.getBrowserVersion()); // 浏览器版本

使用库可以简化代码，并且库通常会定期更新以支持新的浏览器版本和类型。