實際開發工作中會經常遇到一個需求，就是判斷當前登錄網頁的設備是PC還是移動，要求PC端和移動端顯示的是不同的網頁內容。

那么我們就需要對當前登錄設備進行判斷。

使用 navigator.userAgent 字符串檢測

我是在PC端開發完接到要做移動端的需求，而且移動端只有一個頁面，我就統一放在了一個文件夾內。首先在 app.vue 文件內，判斷當前設備是pc端還是移動端。

methods: { // 添加判斷方法 isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); return flag; }},mounted: { if(this.isMobile) { alert('移動端'); this.$router.replace(’/pc_index’); }else { alert('pc端'); this.$router.replace(’/m_index’); }}

接下來就略微介紹一下這個方法，其中用到了 navigator.userAgent 。

這個方法會返回一個只讀的字符串，聲明了瀏覽器在發送 http 請求時的用戶代理頭的值。例如：

<script> document.write('用戶代理：' + navigator.userAgent)</script>// pc端輸出結果：用戶代理： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36// 移動端輸出結果：用戶代理： Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

.match 方法用于在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配，返回值是檢索到的值。類似的方法還有 indexOf()、laseIndexOf()，但是這兩個方法返回的是匹配到的值的位置。所以在判斷方法中使用.match方法匹配所有的移動端型號，最后加的 /i 是表示不區分大小寫。

使用 window.matchMedia() 檢測

也就是利用媒體查詢的方式進行判斷。

window.matchMedia 方法會返回一個新的 mediaQueryList 對象，表示指定的媒體查詢字符串解析后的結果。例如：

var result = window.matchMedia('(min-width: 400px)').matches;console.log(result) //true

window.matchMedia 方法會返回兩個參數，一個是 media，就是查詢的語句內容。另一個是 matches，是返回的結果，為 boolean 類型。

根據當前設備的視口寬度判斷是否是移動端設備。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。