如何使用 JavaScript 檢測移動瀏覽器

移動檢測一直是應用程序開發的關鍵方面。 它既適用於應用程序，也適用於軟件和網站。 有無數理由檢查移動瀏覽器代理。 最重要的是，能夠呈現獨特的用戶體驗。

僅 UAParser.js 庫就獲得了數百萬每週的軟件包下載量。 而且，在大多數情況下，如果您從頭開始構建某些東西就足夠了。 但是，用 JavaScript 檢測移動瀏覽器的其他方法呢？

有時您可能只需要一個簡單的解決方案，無需任何庫即可完成這項工作。 在本文中，我將為您介紹一些用於檢測移動用戶的 JavaScript 技術。 讓我知道我是否錯過了任何東西！

navigator.userAgent

瀏覽器檢測的聖杯是 navigator.UserAgent 屬性。

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

當然，這是一種非常原始的方法。 它很容易被操縱，因為 User-Agent 屬性可以被欺騙。 但是，因為它可以完成這項工作，您仍然可以在各種項目中使用它。 例如登陸頁面或自定義重定向到移動版本。

如何使用navigator.userAgent檢測瀏覽器類型並根據具體瀏覽器顯示內容？

好的，因此，可能存在一個獨特的用例，您希望檢測特定瀏覽器，例如 Chrome 和 Firefox（或者在本例中為 Android 和 iPhone），然後使用該數據顯示特定內容。 這種方法通常用於為特定瀏覽器提供/更改下載鏈接。

在這種情況下，您可以使用以下功能。

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

您可以註釋掉您不想檢查的瀏覽器的各種else if語句，同樣，您可以添加您確實想檢查的其他瀏覽器。

觸摸事件

檢測移動用戶的一種方法是檢查設備是否具有觸摸屏。

使用 GlobalEventHandlers.ontouchstart 屬性，您可以進行簡單檢查以了解用戶如何與您的應用程序交互。 如果交互來自觸摸屏，則您可以返回應用程序或頁面的移動版本。

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Surface 等觸屏設備不具備此屬性。 因此，來自基於桌面的觸摸設備的用戶仍將看到您頁面的桌面版本。

Window.matchMedia()

Window.matchMedia() 是使用 JavaScript 檢測移動用戶的最佳屬性之一。 之所以如此，是因為它可以讓您直接與 CSS 交互。

在很多情況下，媒體查詢更勝一籌，因為它們具有內置的移動檢測工具。 例如，您可以調用來檢查“pointer:coarse”是否為真。

此特定語句驗證設備的指針是精細還是粗糙。

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

或者，該設備可能同時具有細指針和粗指針。 對於這個用例，我們可以檢查是否有任何指針是粗糙的。

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

請記住，這只驗證查詢為真或假。 檢查移動設備的一種更精細的方法是直接使用媒體查詢。

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

此查詢將直接檢查設備的最大寬度並斷言它是否符合條件。 同樣，要正確獲取所有設備，這是一項相當多的工作。 因此，使用已定義所有設備類型的預構建庫會更容易。

在某些情況下有用

多年來，出現了許多用於檢測設備類型的 JavaScript 屬性。 其中很大一部分已被棄用，但其他大多數已集成到庫中。 這也恰好是進行適當的移動檢測的最佳方法。

最後但同樣重要的是，大多數現代框架已經將移動檢測作為框架本身的一部分。 如果您不想做所有的跑腿工作，那麼值得研究一下。

用於檢測移動設備的庫

在本節中，我將列出用於檢測移動設備的最流行的 JavaScript 庫。 我再次強調，這些是 JavaScript 特有的。 請參閱文檔以在您的應用中正確實施。

UAParser.js

就完整的庫而言，UAParser 是最好的。 僅在 npm 上每週的下載量就超過 1000 萬次——UAParser 是檢測移動設備的實際解決方案。 顧名思義，該庫通過解析用戶代理字符串來工作。

但是，它如此受歡迎的原因是您可以解析數百種設備變體。 而且，所有這些都有很好的記錄。 您可以從實際的設備供應商轉向更複雜的檢測模式，例如 CPU 架構。

移動檢測.js

這是用於 PHP 的 Mobile Detect 庫的一個相當簡單的端口，由 Heinrich Goebl 提供給社區。 庫本身使用 User-Agent 進行檢測，因此正如我們之前討論的那樣——這不是最佳選擇。

儘管如此，當涉及到實用的 HTML 模板或投資組合項目時，它應該可以勝任。

isMobile

在這裡，我們對 Kai Mallea 的 User-Agent Navigator 屬性有另一種看法。 雖然仍然是一個簡單的解決方案，但我喜歡 isMobile 提供了多種規格。 例如，您可以測試任何移動設備或特定設備，如手機或平板電腦。

反應設備檢測

你是 React.js 開發者嗎？

那麼這個來自 Michael Laktionov 的圖書館是給你的。 它可以按您的預期工作——首先庫檢測設備類型，然後根據該類型呈現視圖。 與組件集成完美結合，並可通過 API 調用進一步定制。

一個有趣的事實是這個庫包含的選擇器的數量。 它涵蓋了智能電視、可穿戴設備、各種 iPhone 設備等設備。 這為您在為特定設備構建應用程序時提供了廣泛的設計選擇。