如何用BOM检测用户的浏览器类型和版本？

要检测浏览器类型和版本，可通过解析navigator.useragent字符串实现，但该方法存在不可靠、易伪造、维护成本高等问题；更推荐使用特性检测（如'serviceworker' in navigator）、css.supports()、渐进增强等现代方法来判断功能支持情况，而非依赖浏览器类型；若必须获取浏览器信息，可使用较新的useragentdata api，但其普及度仍有限。

要用BOM（Browser Object Model）检测用户的浏览器类型和版本，主要是通过访问window.navigator对象，尤其是它的userAgent属性。这个字符串包含了浏览器、操作系统、渲染引擎等信息。虽然它能提供一些线索，但说实话，这方法现在挺老派的，而且充满了各种坑。

解决方案 说起用BOM来识别浏览器，我们主要盯着的就是navigator.userAgent这个字符串。它就像浏览器的“身份证”，里面密密麻麻地写着一堆信息。比如，你可能会看到“Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edge/120.0.0.0”这样的东西。

要从中提取出浏览器类型和版本，通常我们需要用到正则表达式来匹配特定的关键词和版本号。这活儿有点像侦探破案，得从一堆看似杂乱无章的线索里找出规律。

一个基本的思路是，先判断一些主流浏览器的特征字符串。举个例子：

function getBrowserInfo() {
    const ua = navigator.userAgent;
    let browserName = 'Unknown';
    let browserVersion = 'Unknown';

    // 优先检测Edge和Chrome，因为Edge的UA里也包含Chrome
    if (ua.indexOf("Edg") > -1) { // 新版Edge
        browserName = "Edge";
        const matches = ua.match(/Edg\/(\d+\.\d+)/);
        if (matches && matches[1]) {
            browserVersion = matches[1];
        }
    } else if (ua.indexOf("Chrome") > -1) {
        browserName = "Chrome";
        const matches = ua.match(/Chrome\/(\d+\.\d+)/);
        if (matches && matches[1]) {
            browserVersion = matches[1];
        }
    } else if (ua.indexOf("Firefox") > -1) {
        browserName = "Firefox";
        const matches = ua.match(/Firefox\/(\d+\.\d+)/);
        if (matches && matches[1]) {
            browserVersion = matches[1];
        }
    } else if (ua.indexOf("Safari") > -1) { // Safari在Chrome之后判断
        browserName = "Safari";
        const matches = ua.match(/Version\/(\d+\.\d+).*Safari/);
        if (matches && matches[1]) {
            browserVersion = matches[1];
        }
    } else if (ua.indexOf("MSIE") > -1 || ua.indexOf("Trident") > -1) { // IE老版本和新版
        browserName = "Internet Explorer";
        if (ua.indexOf("MSIE") > -1) {
            const matches = ua.match(/MSIE (\d+\.\d+)/);
            if (matches && matches[1]) {
                browserVersion = matches[1];
            }
        } else { // IE 11
            const matches = ua.match(/rv:(\d+\.\d+)/);
            if (matches && matches[1]) {
                browserVersion = matches[1];
            }
        }
    }

    return { name: browserName, version: browserVersion };
}

const info = getBrowserInfo();
console.log(`浏览器类型: ${info.name}, 版本: ${info.version}`);

这段代码只是一个非常基础的示例，实际应用中会复杂得多，因为不同浏览器在userAgent字符串里有太多奇怪的“癖好”和变数。比如，Chrome的userAgent里会包含“Safari”，Edge会包含“Chrome”，这要求我们判断的顺序很重要。

为什么在现代Web开发中，我们仍然需要关注浏览器兼容性？

你可能会觉得，现在都2024年了，大家浏览器版本都挺新的，是不是可以不用太纠结浏览器兼容性了？说实话，我以前也这么想。但现实往往会给你一记“耳光”。虽然主流浏览器更新迭代很快，大部分新特性都能得到广泛支持，但总有一些特殊情况或者说“遗留问题”会让你不得不去考虑浏览器兼容性，甚至去识别它们。

比如，一些政府或大型企业内部系统，可能还在使用非常老旧的IE浏览器，或者被定制过的特定版本浏览器。你的应用如果需要兼容这些“古董”，那可就得硬着头皮去识别了。再比如，一些特定的性能优化或者CSS Hack，有时候就是为了某个特定浏览器的某个版本而生。我遇到过一个情况，某个CSS属性在旧版Safari上渲染有问题，不得不通过JavaScript检测到是Safari，然后动态添加一个特定的类名来修正。

还有，数据分析和用户行为追踪也可能需要这些信息。了解你的用户主要使用什么浏览器，什么版本，有助于你优化用户体验，或者决定哪些新特性可以大胆使用，哪些需要降级处理。这不仅仅是技术问题，更是产品和运营层面的考量。

navigator.userAgent在实际应用中会遇到哪些坑？

navigator.userAgent这东西，用起来真是让人又爱又恨。它提供了信息，但同时也埋下了无数的坑。

最大的一个坑就是不可靠性。用户代理字符串是可以被伪造的。很多浏览器扩展、开发者工具，甚至一些恶意软件，都可以随意修改这个字符串。这意味着你检测到的信息，可能根本不是用户真实的浏览器。我见过有人为了访问某个只支持IE的网站，把Chrome的UA改成IE的，这种情况下你的检测就完全失效了。

其次是复杂性和维护成本。userAgent字符串的格式并没有一个严格的标准，不同浏览器厂商有自己的“方言”，而且它们还经常变。今天Chrome的UA是这样，明天可能就多了一串，或者少了一串。这意味着你的解析逻辑需要不断地更新和维护，这简直是个无底洞。每次浏览器大版本更新，你可能都得去查查UA有没有变，有没有新的坑出现。

再来是模糊性。很多时候，一个userAgent字符串可能同时包含多个浏览器的关键词。比如前面提到的，Edge和Opera的UA里都带着“Chrome”字样。这就要求你的判断逻辑必须非常严谨，要有优先级，不能简单地看到“Chrome”就认为是Chrome，得先排除掉更具体的浏览器。

最后，它也无法告诉你浏览器到底支持哪些具体功能。知道是Chrome 120，不代表你知道它支持WebGPU或者某个新的CSS选择器。这才是我们真正关心的。

替代navigator.userAgent，现代Web开发有哪些更推荐的做法？

既然navigator.userAgent这么多坑，那有没有更好的办法呢？当然有，而且这些方法在现代Web开发中更受推崇，也更具“未来感”。

最推荐的，也是最核心的理念是特性检测（Feature Detection），而不是浏览器检测。简单来说，就是直接检查浏览器是否支持某个特定的API、属性或方法，而不是去猜测它是哪个浏览器，然后推断它支持什么。

举个例子，如果你想知道浏览器是否支持Service Worker，你直接检查'serviceWorker' in navigator就可以了，而不是去判断是不是Chrome或者Firefox。如果你想知道某个CSS属性是否被支持，可以使用CSS.supports()方法，或者直接检查document.body.style.propertyName !== undefined。这种方式的好处是，它直接面向功能，无论用户用什么浏览器，只要它支持这个功能，你的代码就能跑。这大大提高了代码的健壮性和未来的兼容性。

// 特性检测示例
if ('serviceWorker' in navigator) {
    console.log('浏览器支持 Service Worker');
} else {
    console.log('浏览器不支持 Service Worker');
}

if (CSS.supports('display', 'grid')) {
    console.log('浏览器支持 CSS Grid 布局');
} else {
    console.log('浏览器不支持 CSS Grid 布局');
}

此外，渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）也是非常重要的设计哲学。这意味着你首先为所有用户提供一个基础的、可用的体验，然后在此基础上，为支持更高级功能的浏览器提供更丰富的体验。即使某个浏览器不支持某个新特性，你的网站也依然能正常工作，只是可能没有那么炫酷。

当然，navigator.userAgentData是一个相对较新的API，它旨在提供一个更结构化、更可靠的方式来获取浏览器信息，但目前其普及度还不够高，不能完全替代传统方法，而且它也受限于用户隐私保护，获取的信息可能不如userAgent那么详细。但未来，这可能是一个更好的方向。

在我看来，除非你真的有非常特殊的、无法通过特性检测解决的需求（比如，为了兼容某个特定版本的老旧浏览器，或者为了修复某个只在特定浏览器上出现的渲染bug），否则应该尽量避免使用navigator.userAgent进行浏览器类型和版本的判断。拥抱特性检测，让你的代码更专注于功能本身，而不是纠结于“我是谁，我在哪”。

以上就是如何用BOM检测用户的浏览器类型和版本？的详细内容，更多请关注php中文网其它相关文章！