JavaScript 偵測手機瀏覽器的五種方法

有時候，前端網頁需要知道，用戶使用的是手機瀏覽器還是桌面瀏覽器。

本文根據 StackOverflow，整理了 JavaScript 偵測手機瀏覽器的五種方法。

一、navigator.userAgent

最簡單的方法就是分析瀏覽器的 user agent 字符串，它包含了設備信息。

JS 通過navigator.userAgent屬性拿到這個字符串，只要裡面包含mobi、android、iphone等關鍵字，就可以認定是移動設備。


if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
  // 當前設備是移動設備
}

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

這種方法的優點是簡單方便，缺點是不可靠，因為用戶可以修改這個字符串，讓手機瀏覽器偽裝成桌面瀏覽器。

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


const isMobile = navigator.userAgentData.mobile;

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

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


if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
  // 當前設備是移動設備
}

二、window.screen，window.innerWidth

另一種方法是通過屏幕寬度，判斷是否為手機。

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


if (window.screen.width < 500) {
  // 當前設備是移動設備 
}

上面示例中，如果屏幕寬度window.screen.width小於500像素，就認為是手機。

這個方法的缺點在於，如果手機橫屏使用，就識別不了。

另一個屬性window.innerWidth返回瀏覽器窗口裡面的網頁可見部分的寬度，比較適合指定網頁在不同寬度下的樣式。


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

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

window.orientation屬性用於獲取屏幕的當前方向，只有移動設備才有這個屬性，桌面設備會返回undefined。


if (typeof window.orientation !== 'undefined') {
  // 當前設備是移動設備 
}

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

四、touch 事件

第四種方法是，手機瀏覽器的 DOM 元素可以通過ontouchstart屬性，為touch事件指定監聽函數。桌面設備沒有這個屬性。


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

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

五、window.matchMedia()

最後一種方法是結合 CSS 來判斷。

CSS 通過 media query（媒介查詢）為網頁指定響應式樣式。如果某個針對手機的 media query 語句生效了，就可以認為當前設備是移動設備。

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


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

上面示例中，window.matchMedia()的參數是一個 CSS 查詢語句，表示只對屏幕寬度不超過 700 像素的設備生效。它返回一個對象，該對象的matches屬性是一個布爾值。如果是true，就表示查詢生效，當前設備是手機。

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


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

上面示例中，CSS 語句pointer:coarse表示當前設備的指針是不精確的。由於手機不支持鼠標，只支持觸摸，所以符合這個條件。

有些設備支持多種指針，比如同時支持鼠標和觸摸。pointer:coarse只用來判斷主指針，此外還有一個any-pointer命令判斷所有指針。


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

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

六、工具包

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


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

if (isMobile) {
  // 當前設備是移動設備
}

（完）

推薦訂閱源

阮一峰的网络日志