基于VUE實現判斷設備是PC還是移動端
實際開發(fā)工作中會經常遇到一個需求，就是判斷當前登錄網頁的設備是PC還是移動，要求PC端和移動端顯示的是不同的網頁內容。
那么我們就需要對當前登錄設備進行判斷。
使用 navigator.userAgent 字符串檢測
我是在PC端開發(fā)完接到要做移動端的需求，而且移動端只有一個頁面，我就統一放在了一個文件夾內。
首先在 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 。
這個方法會返回一個只讀的字符串，聲明了瀏覽器在發(fā)送 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 是表示不區(qū)分大小寫。
使用 window.matchMedia() 檢測
也就是利用媒體查詢的方式進行判斷。
window.matchMedia 方法會返回一個新的 mediaQueryList 對象，表示指定的媒體查詢字符串解析后的結果。例如：
var result = window.matchMedia("(min-width: 400px)").matches;
console.log(result) //true
window.matchMedia 方法會返回兩個參數，一個是 media，就是查詢的語句內容。另一個是 matches，是返回的結果，為 boolean 類型。
根據當前設備的視口寬度判斷是否是移動端設備。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
解決vue數據不實時更新的問題(數據更改了,但數據不實時更新)
這篇文章主要介紹了解決vue數據不實時更新的問題(數據更改了,但數據不實時更新)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
本文介紹了Vue3+Vite+Ts搭建腳手架的實現,步驟包括創(chuàng)建項目、選擇技術棧、安裝依賴及運行項目,旨在為開發(fā)者提供一個簡易快速的搭建流程,感興趣的可以了解一下2024-11-11
本篇文章主要介紹了vuejs使用$emit和$on進行組件之間的傳值的示例，具有一定的參考價值，有興趣的可以了解一下2017-10-10
vue3?elementPlus?table實現列寬可拖拽功能
這篇文章主要介紹了vue3?elementPlus?table實現列寬可拖拽功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
在實際項目開發(fā)過程中，如果公共數據比較多我們會使用vuex做公共狀態(tài)管理，但是在對瀏覽器進行刷新操作的時候，會導致vuex內的數據丟失，這種情況有些時候是沒問題的，但是有的時候我們需要某些數據可以持久化的保存，這樣就需要做對應的處理2023-01-01
本篇文章主要介紹了vue2滾動條加載更多數據實現代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要為大家介紹了vue3使用Facebook嵌入式視頻播放器API方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了淺談vue-router 路由傳參的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue重試機制示例，重試指的是當加載出錯時，有能力重新發(fā)起加載組件的請求。異步組件加載失敗后的重試機制，與請求服務端接口失敗后的重試機制一樣2023-01-01
這篇文章主要為大家詳細介紹了vue實現記事本功能，記事本可以進行添加刪除事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06