要檢測瀏覽器類型和版本，可通過解析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進行瀏覽器類型和版本的判斷。擁抱特性檢測，讓你的代碼更專注于功能本身，而不是糾結于“我是誰，我在哪”。
