現(xiàn)在手機(jī)網(wǎng)站已經(jīng)很普及了，有時(shí)候前端網(wǎng)頁(yè)需要判斷，用戶使用的是手機(jī)瀏覽器還是電腦瀏覽器。這篇文章整理了JavaScript判斷是否手機(jī)瀏覽器的五種方法，通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值。

一、navigator.userAgent

最簡(jiǎn)單的方法也是最常用的方法，就是分析瀏覽器的 user agent 字符串，它包含了設(shè)備信息。

JS 通過(guò)navigator.userAgent屬性拿到這個(gè)字符串，只要里面包含mobi、android、iphone等關(guān)鍵字，就可以認(rèn)定是移動(dòng)設(shè)備。

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
  // 當(dāng)前設(shè)備是移動(dòng)設(shè)備
}

// 另一種寫法
if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // 當(dāng)前設(shè)備是移動(dòng)設(shè)備
}

這種方法的優(yōu)點(diǎn)是簡(jiǎn)單方便，缺點(diǎn)是不可靠，因?yàn)橛脩艨梢孕薷倪@個(gè)字符串，讓手機(jī)瀏覽器偽裝成桌面瀏覽器。

Chromium 系的瀏覽器，還有一個(gè)navigator.userAgentData屬性，也是類似的作用。不同之處是它將 user agent 字符串解析為一個(gè)對(duì)象，該對(duì)象的mobile屬性，返回一個(gè)布爾值，表示用戶是否使用移動(dòng)設(shè)備。

const isMobile = navigator.userAgentData.mobile; 

注意，蘋果的 Safari 瀏覽器和 Firefox 瀏覽器都不支持這個(gè)屬性，具體情況可以查看Caniuse 網(wǎng)站。

此外，還有一個(gè)已經(jīng)廢除的navigator.platform屬性，所有瀏覽器都支持，所以也可以用。它返回一個(gè)字符串，表示用戶的操作系統(tǒng)。

if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
  // 當(dāng)前設(shè)備是移動(dòng)設(shè)備
}

二、window.screen，window.innerWidth

另一種方法是通過(guò)屏幕寬度，判斷是否為手機(jī)。

window.screen對(duì)象返回用戶設(shè)備的屏幕信息，該對(duì)象的width屬性是屏幕寬度（單位為像素）。

if (window.screen.width < 500) {
  // 當(dāng)前設(shè)備是移動(dòng)設(shè)備 
}

上面示例中，如果屏幕寬度window.screen.width小于500像素，就認(rèn)為是手機(jī)。

這個(gè)方法的缺點(diǎn)在于，如果手機(jī)橫屏使用，就識(shí)別不了。

另一個(gè)屬性window.innerWidth返回瀏覽器窗口里面的網(wǎng)頁(yè)可見部分的寬度，比較適合指定網(wǎng)頁(yè)在不同寬度下的樣式。

const getBrowserWidth = function() {
  if (window.innerWidth < 768) {
    return "xs";
  } else if (window.innerWidth < 991) {
    return "sm";
  } else if (window.innerWidth < 1199) {
    return "md";
  } else {
    return "lg";
  }
};

三、window.orientation

第三種方法是偵測(cè)屏幕方向，手機(jī)屏幕可以隨時(shí)改變方向（橫屏或豎屏），桌面設(shè)備做不到。

window.orientation屬性用于獲取屏幕的當(dāng)前方向，只有移動(dòng)設(shè)備才有這個(gè)屬性，桌面設(shè)備會(huì)返回undefined。

if (typeof window.orientation !== 'undefined') {
  // 當(dāng)前設(shè)備是移動(dòng)設(shè)備 
}

注意，iPhone 的 Safari 瀏覽器不支持該屬性。

四、touch 事件

第四種方法是，手機(jī)瀏覽器的 DOM 元素可以通過(guò)ontouchstart屬性，為touch事件指定監(jiān)聽函數(shù)。桌面設(shè)備沒(méi)有這個(gè)屬性。

function isMobile() { 
  return ('ontouchstart' in document.documentElement); 
}

// 另一種寫法
function isMobile() {
  try {
    document.createEvent("TouchEvent"); return true;
  } catch(e) {
    return false; 
  }
}

五、window.matchMedia()

結(jié)合 CSS 來(lái)判斷。

CSS 通過(guò) media query（媒介查詢）為網(wǎng)頁(yè)指定響應(yīng)式樣式。如果某個(gè)針對(duì)手機(jī)的 media query 語(yǔ)句生效了，就可以認(rèn)為當(dāng)前設(shè)備是移動(dòng)設(shè)備。

window.matchMedia()方法接受一個(gè) CSS 的 media query 語(yǔ)句作為參數(shù)，判斷這個(gè)語(yǔ)句是否生效。

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

上面示例中，window.matchMedia()的參數(shù)是一個(gè) CSS 查詢語(yǔ)句，表示只對(duì)屏幕寬度不超過(guò) 700 像素的設(shè)備生效。它返回一個(gè)對(duì)象，該對(duì)象的matches屬性是一個(gè)布爾值。如果是true，就表示查詢生效，當(dāng)前設(shè)備是手機(jī)。

除了通過(guò)屏幕寬度判斷，還可以通過(guò)指針的精確性判斷。

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

上面示例中，CSS 語(yǔ)句pointer:coarse表示當(dāng)前設(shè)備的指針是不精確的。由于手機(jī)不支持鼠標(biāo)，只支持觸摸，所以符合這個(gè)條件。

有些設(shè)備支持多種指針，比如同時(shí)支持鼠標(biāo)和觸摸。pointer:coarse只用來(lái)判斷主指針，此外還有一個(gè)any-pointer命令判斷所有指針。

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

上面示例中，any-pointer:coarse表示所有指針里面，只要有一個(gè)指針是不精確的，就符合查詢條件。

六、工具包

除了上面這些方法，也可以使用別人寫好的工具包。這里推薦 react-device-detect，它支持多種粒度的設(shè)備偵測(cè)。

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

if (isMobile) {
  // 當(dāng)前設(shè)備是移動(dòng)設(shè)備
}

到此這篇關(guān)于JavaScript判斷是否手機(jī)瀏覽器的五種方法的文章就介紹到這了,更多相關(guān)js判斷是手機(jī)的五種方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！