快捷導(dǎo)航

基于VUE實(shí)現(xiàn)判斷設(shè)備是PC還是移動(dòng)端

更新時(shí)間：2020年07月03日 09:38:11 作者：奔跑的太陽(yáng)花

這篇文章主要介紹了基于VUE實(shí)現(xiàn)判斷設(shè)備是PC還是移動(dòng)端,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

實(shí)際開(kāi)發(fā)工作中會(huì)經(jīng)常遇到一個(gè)需求，就是判斷當(dāng)前登錄網(wǎng)頁(yè)的設(shè)備是PC還是移動(dòng)，要求PC端和移動(dòng)端顯示的是不同的網(wǎng)頁(yè)內(nèi)容。

那么我們就需要對(duì)當(dāng)前登錄設(shè)備進(jìn)行判斷。

使用 navigator.userAgent 字符串檢測(cè)

我是在PC端開(kāi)發(fā)完接到要做移動(dòng)端的需求，而且移動(dòng)端只有一個(gè)頁(yè)面，我就統(tǒng)一放在了一個(gè)文件夾內(nèi)。
首先在 app.vue 文件內(nèi)，判斷當(dāng)前設(shè)備是pc端還是移動(dòng)端。

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("移動(dòng)端");
  this.$router.replace('/pc_index');
 }else {
  alert("pc端");
  this.$router.replace('/m_index');
 }
}

接下來(lái)就略微介紹一下這個(gè)方法，其中用到了 navigator.userAgent 。

這個(gè)方法會(huì)返回一個(gè)只讀的字符串，聲明了瀏覽器在發(fā)送 http 請(qǐng)求時(shí)的用戶代理頭的值。例如：

<script>
 document.write("用戶代理：" + navigator.userAgent)
</script>

// pc端輸出結(jié)果：
用戶代理： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
// 移動(dòng)端輸出結(jié)果：
用戶代理： 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 方法用于在字符串內(nèi)檢索指定的值，或找到一個(gè)或多個(gè)正則表達(dá)式的匹配，返回值是檢索到的值。
類似的方法還有 indexOf()、laseIndexOf()，但是這兩個(gè)方法返回的是匹配到的值的位置。
所以在判斷方法中使用.match方法匹配所有的移動(dòng)端型號(hào)，最后加的 /i 是表示不區(qū)分大小寫。

使用 window.matchMedia() 檢測(cè)

也就是利用媒體查詢的方式進(jìn)行判斷。

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