溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

VUE如何實現判斷設備是PC還是移動端

發布時間:2020-07-03 14:18:10 來源:億速云 閱讀:1014 作者:清晨 欄目:開發技術

這篇文章將為大家詳細講解有關VUE如何實現判斷設備是PC還是移動端,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

實際開發工作中會經常遇到一個需求,就是判斷當前登錄網頁的設備是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 類型。

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

關于VUE如何實現判斷設備是PC還是移動端就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女