JavaScript判斷是否手機瀏覽器的五種方法
現在手機網站已經很普及瞭,有時候前端網頁需要判斷,用戶使用的是手機瀏覽器還是電腦瀏覽器。這篇文章整理瞭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) { // 當前設備是移動設備 }
到此這篇關於JavaScript判斷是否手機瀏覽器的五種方法的文章就介紹到這瞭,更多相關js判斷是手機的五種方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- js不同客戶端顯示不同廣告(pc端+移動端+微信端)
- JavaScript實現移動端橫豎屏檢測
- JavaScript 判斷瀏覽器是否是IE
- Vue前端項目自適應佈局的簡單方法
- vue中PC端地址跳轉移動端的操作方法