原生 JS 判斷設(shè)備類型方法

可通過(guò)以下兩種主流方案實(shí)現(xiàn)設(shè)備類型檢測(cè)：

‌方案一：基于 navigator.userAgent 的 User Agent 檢測(cè)‌

‌實(shí)現(xiàn)代碼‌：

function isMobileDevice() {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  const mobileRegex = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|windows phone|phone|webos|kindle|tablet/i;
  return mobileRegex.test(ua.toLowerCase());
}

‌邏輯說(shuō)明‌：

• 通過(guò) navigator.userAgent 獲取瀏覽器標(biāo)識(shí)字符串‌。
• 正則表達(dá)式匹配移動(dòng)端關(guān)鍵詞（如 android、iphone、mobile 等）‌。
• 返回 true 表示移動(dòng)端，false 表示 PC 端。

?。。〗酉聛?lái)是方案二，方案二不太建議使用，因?yàn)槿郫B可能不止768

‌方案二：結(jié)合屏幕分辨率與 User Agent 檢測(cè)（增強(qiáng)版） ‌

‌實(shí)現(xiàn)代碼‌：

function detectDeviceType() {
  const ua = navigator.userAgent.toLowerCase();
  const isMobileUA = /mobile|android|iphone|ipad|ipod|windows phone|phone|webos/i.test(ua);
  const isSmallScreen = window.innerWidth <= 768;
  return isMobileUA || isSmallScreen ? 'mobile' : 'pc';
}

‌邏輯說(shuō)明‌：

• 同時(shí)檢測(cè) User Agent 和屏幕寬度（移動(dòng)端通常小于等于 768px）‌。
• 雙條件驗(yàn)證減少誤判（如 iPad 可能被識(shí)別為 PC 端）‌。

‌注意事項(xiàng)‌

‌User Agent 的局限性‌：部分瀏覽器可能偽造 UA（如 Chrome 移動(dòng)端模擬 PC 模式）‌。

‌平板設(shè)備處理‌：若需區(qū)分平板與手機(jī)，需額外增加關(guān)鍵詞（如 ipad、tablet）‌。

‌動(dòng)態(tài)響應(yīng)式場(chǎng)景‌：建議結(jié)合 CSS 媒體查詢實(shí)現(xiàn)布局適配，而非僅依賴 JS 檢測(cè)‌。

‌代碼調(diào)用示例

if (isMobileDevice()) {
  console.log("當(dāng)前設(shè)備為手機(jī)/平板");
} else {
  console.log("當(dāng)前設(shè)備為 PC");
}

‌1. 基于 navigator.userAgent 的插件方案‌

‌推薦插件‌：mobile-detect.js、platform.js‌實(shí)現(xiàn)邏輯‌：

• 插件通過(guò)解析 navigator.userAgent 中的設(shè)備標(biāo)識(shí)符（如 Android、iPhone、Windows 等）實(shí)現(xiàn)設(shè)備判斷‌。
• 支持更細(xì)分的設(shè)備類型檢測(cè)（如平板、手機(jī)、PC）‌。

‌代碼示例（以 mobile-detect.js 為例） ‌：

// 引入插件
import MobileDetect from 'mobile-detect';

// 初始化檢測(cè)器
const md = new MobileDetect(navigator.userAgent);

// 判斷設(shè)備類型
if (md.mobile()) {
  console.log("移動(dòng)端登錄設(shè)備（手機(jī)/平板）");
} else if (md.tablet()) {
  console.log("平板設(shè)備");
} else {
  console.log("PC 端設(shè)備");
}

‌2. 結(jié)合屏幕分辨率的增強(qiáng)方案‌

‌推薦插件‌：react-device-detect（適用于 React 項(xiàng)目）

‌實(shí)現(xiàn)邏輯‌：

• 通過(guò) User Agent 和屏幕寬度綜合判斷設(shè)備類型，減少誤判‌。
• 支持動(dòng)態(tài)響應(yīng)式場(chǎng)景（如橫豎屏切換）‌。

‌代碼示例‌：

import { isMobile } from 'react-device-detect';

if (isMobile) {
  console.log("移動(dòng)端登錄設(shè)備");
} else {
  console.log("PC 端登錄設(shè)備");
}

‌注意事項(xiàng)‌

• ‌User Agent 的局限性‌：

  • 瀏覽器可能偽造 UA（如 Chrome 的“桌面模式”模擬 PC 端）‌。
  • 建議結(jié)合后端設(shè)備指紋（如 IP、設(shè)備型號(hào)）增強(qiáng)準(zhǔn)確性‌。

• ‌平板設(shè)備的特殊處理‌：

  • 部分平板（如 iPad）可能被識(shí)別為 PC 端，需額外判斷 navigator.platform（如 MacIntel 表示 iPad）‌。

• ‌動(dòng)態(tài)設(shè)備切換場(chǎng)景‌：

  • 監(jiān)聽(tīng) window.resize 事件，更新設(shè)備狀態(tài)（如橫豎屏切換導(dǎo)致屏幕寬度變化）‌。

‌推薦插件對(duì)比‌

到此這篇關(guān)于JavaScript前端實(shí)現(xiàn)判斷登錄設(shè)備是移動(dòng)端還是PC的文章就介紹到這了,更多相關(guān)JavaScript判斷設(shè)備類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論