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) { // 目前裝置是移動裝置 }

（完）