目錄

（1）使用navigator.userAgent

（2）使用window.matchMedia()

（3）使用react-device-detect

---

（1）使用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) ) {// 當前設備是移動設備 }

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

---

（2）使用window.matchMedia()

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

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

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

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

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

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

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

---

（3）使用react-device-detect

除上述方法，還可以使用工具包。推薦?react-device-detect，支持多種粒度的設備檢測。

import {isMobile} from 'react-device-detect';if (isMobile) {// 當前設備是移動設備 }

總結

以上是生活随笔為你收集整理的判断手机浏览器还是桌面浏览器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。