在網(wǎng)站開(kāi)發(fā)中，我們經(jīng)常需要判斷用戶所使用的設(shè)備類型，以便提供不同的展示效果或功能。JavaScript 提供了一些方法來(lái)實(shí)現(xiàn)這種設(shè)備判斷，下面我們將詳細(xì)介紹。

使用 userAgent 判斷設(shè)備類型

最常見(jiàn)的方法是使用 navigator.userAgent 屬性來(lái)判斷用戶的設(shè)備類型，該屬性會(huì)返回一個(gè)包含瀏覽器廠商、操作系統(tǒng)、設(shè)備型號(hào)等信息的字符串。常見(jiàn)的 userAgent 字符串如下：

// 蘋果手機(jī)
'Mozilla/5.0 (iPhone; CPU iPhone OS 14_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1'
// 安卓手機(jī)
'Mozilla/5.0 (Linux; Android 11; SM-G9750 Build/RP1A.200720.012; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/91.0.4472.101 Mobile Safari/537.36'
// 蘋果電腦
'Mozilla/5.0 (Macintosh; Intel Mac OS X 11_4_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36'
// Windows 電腦
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36'

通過(guò)這些字符串可以判斷出用戶所使用的設(shè)備類型，進(jìn)而決定應(yīng)該展示哪些頁(yè)面內(nèi)容。例如，我們可以在蘋果手機(jī)上展示 iOS 風(fēng)格的頁(yè)面，而在安卓手機(jī)上展示 Material Design 風(fēng)格的頁(yè)面。

使用 screen.width 判斷設(shè)備寬度

除了使用 userAgent 判斷設(shè)備類型外，我們還可以使用 screen.width 和 screen.height 來(lái)判斷設(shè)備寬度和高度。例如：

var deviceWidth = screen.width;
if (deviceWidth >768) {
// 寬屏設(shè)備展示 PC 端內(nèi)容
} else {
// 窄屏設(shè)備展示移動(dòng)端內(nèi)容
}

通過(guò)這種方法，我們可以將頁(yè)面布局自動(dòng)適配到不同的設(shè)備寬度上。

使用 navigator.platform 判斷操作系統(tǒng)類型

如果我們只是需要判斷用戶的操作系統(tǒng)類型，可以直接使用 navigator.platform 屬性。例如：

var osName = navigator.platform;
if (osName.includes('Win')) {
// Windows 系統(tǒng)相關(guān)邏輯
} else if (osName.includes('Mac')) {
// Mac OS 系統(tǒng)相關(guān)邏輯
} else {
// 其他系統(tǒng)相關(guān)邏輯
}

通過(guò)這種方法，我們可以根據(jù)用戶的操作系統(tǒng)類型來(lái)提供更貼心的使用體驗(yàn)。例如，對(duì)于 Windows 用戶，我們可以提供 .exe 安裝程序和右鍵菜單等功能。

使用 window.orientation 判斷橫豎屏

對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)，使用 window.orientation 屬性可以判斷設(shè)備當(dāng)前的橫豎屏狀態(tài)。例如：

if (window.orientation === 0) {
// 豎屏狀態(tài)下展示內(nèi)容
} else if (window.orientation === 90 || window.orientation === -90) {
// 橫屏狀態(tài)下展示內(nèi)容
}

通過(guò)這種方法，我們可以針對(duì)設(shè)備橫豎屏狀態(tài)下的不同需求，做出相應(yīng)的頁(yè)面優(yōu)化和布局調(diào)整。

總結(jié)

以上就是 JavaScript 判斷設(shè)備類型的幾種方法，通過(guò)這些方法我們可以根據(jù)用戶的設(shè)備類型、屏幕寬度、操作系統(tǒng)類型和橫豎屏狀態(tài)等信息，為用戶提供更貼心的使用體驗(yàn)，從而提升網(wǎng)站的用戶滿意度。