.jpg)
檢測設(shè)備類型的核心方法是使用JavaScript的navigator.useragent結(jié)合正則表達(dá)式進(jìn)行判斷，具體步驟如下：1. 獲取user agent并轉(zhuǎn)為小寫；2. 使用正則表達(dá)式判斷是否包含iphone、ipad、ipod或android來識別移動設(shè)備；3. 如需更精確判斷，可進(jìn)一步區(qū)分android手機(jī)與平板，通過檢測是否包含mobile關(guān)鍵字排除平板；4. 推薦使用ua-parser-JS庫解析user agent，以提高準(zhǔn)確性和簡化開發(fā)；5. 除user agent外，也可結(jié)合css media queries和屏幕尺寸輔助判斷設(shè)備類型，但因屏幕尺寸可變，仍建議綜合多種方式共同判斷。
檢測設(shè)備類型，說白了，就是用JavaScript來判斷用戶是用手機(jī)、平板還是電腦訪問你的網(wǎng)站。核心在于navigator.userAgent這個東西，它包含了用戶瀏覽器發(fā)送給服務(wù)器的關(guān)于自己身份的信息。
解決方案
navigator.userAgent 就像一個瀏覽器的“身份證”，里面藏著設(shè)備類型的信息。但直接用它很麻煩，因為不同瀏覽器、不同設(shè)備，這個字符串的格式都不一樣。我們需要用正則表達(dá)式來提取關(guān)鍵信息。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
-
獲取 User Agent：
const userAgent = navigator.userAgent.toLowerCase();
先把它轉(zhuǎn)成小寫，方便后面匹配。
-
判斷是否是移動設(shè)備：
const isMobile = /iphone|ipad|ipod|android/.test(userAgent); if (isMobile) { console.log("這是一個移動設(shè)備"); } else { console.log("這是一個桌面設(shè)備"); }
這里用了一個簡單的正則表達(dá)式，如果userAgent里包含iphone、ipad、ipod或者android，就認(rèn)為是移動設(shè)備。
-
更精確的判斷（可選）：
如果需要更精確的判斷，比如區(qū)分Android手機(jī)和平板，可以這樣：
const isAndroid = /android/.test(userAgent); const isTablet = /ipad|android/.test(userAgent) && !/mobile/.test(userAgent); if (isAndroid && !isTablet) { console.log("這是一個Android手機(jī)"); } else if (isTablet) { console.log("這是一個平板"); }這里先判斷是否是Android，然后判斷是否是平板。平板的判斷稍微復(fù)雜一點，要同時包含ipad或者android，并且不包含mobile。
-
注意事項：
- User Agent是可以被修改的，所以這種方法不是100%可靠。
- 不同的瀏覽器和設(shè)備，User Agent的格式可能不一樣，需要不斷更新正則表達(dá)式。
- 盡量不要依賴User Agent來做關(guān)鍵的業(yè)務(wù)邏輯，比如支付，可以用服務(wù)器端來判斷。
為什么不直接用navigator.platform？
navigator.platform 理論上應(yīng)該返回操作系統(tǒng)的信息，但實際上，它在不同瀏覽器上的表現(xiàn)并不一致，很多時候都返回Win32或者M(jìn)acIntel，參考價值不大。而且，即使能正確返回操作系統(tǒng)信息，也無法區(qū)分手機(jī)和平板。所以，navigator.userAgent才是更可靠的選擇。
如何處理User Agent的兼容性問題？
User Agent的格式千奇百怪，要做到完全兼容是不可能的。一個比較好的做法是，收集常見的User Agent，然后根據(jù)實際情況不斷更新正則表達(dá)式。也可以使用一些開源的User Agent解析庫，比如ua-parser-js，它可以幫你解析User Agent，并返回設(shè)備類型、操作系統(tǒng)、瀏覽器等信息。
// 引入 ua-parser-js const UAParser = require('ua-parser-js'); // 獲取 User Agent const userAgent = navigator.userAgent; // 解析 User Agent const parser = new UAParser(); const result = parser.setUA(userAgent).getResult(); // 輸出設(shè)備類型 console.log(result.device.type); // "mobile", "tablet", "desktop", "wearable", "tv" // 輸出操作系統(tǒng) console.log(result.os.name); // "Android", "iOS", "windows", "macos" // 輸出瀏覽器 console.log(result.browser.name); // "Chrome", "Safari", "Firefox"
使用ua-parser-js可以大大簡化User Agent的解析工作，并且可以獲得更準(zhǔn)確的結(jié)果。
除了User Agent，還有其他方法檢測設(shè)備類型嗎？
除了User Agent，還可以使用css Media Queries來判斷設(shè)備類型。Media Queries可以根據(jù)屏幕尺寸、分辨率等條件來應(yīng)用不同的CSS樣式。
/* 屏幕寬度小于768px時，應(yīng)用以下樣式 */ @media (max-width: 768px) { body { font-size: 14px; } } /* 屏幕寬度大于768px時，應(yīng)用以下樣式 */ @media (min-width: 768px) { body { font-size: 16px; } }
Media Queries主要用于響應(yīng)式布局，但也可以用來判斷設(shè)備類型。比如，如果屏幕寬度小于768px，就認(rèn)為是移動設(shè)備。
另外，還可以使用JavaScript來獲取屏幕尺寸，然后根據(jù)屏幕尺寸來判斷設(shè)備類型。
const screenWidth = window.screen.width; if (screenWidth < 768) { console.log("這是一個移動設(shè)備"); } else { console.log("這是一個桌面設(shè)備"); }
但是，這種方法也有局限性，因為屏幕尺寸是可以被修改的，而且有些桌面設(shè)備的屏幕也很小。
總的來說，檢測設(shè)備類型最好的方法是結(jié)合User Agent、CSS Media Queries和屏幕尺寸等多種信息，綜合判斷。
.png)
