天天看點

vue項目判斷目前裝置是移動端還是PC端

需求:PC端項目手機打開布局錯亂。建議加個 mobile版的首頁,給客戶提示PC端登入

方案:當客戶打開項目時,判斷裝置是移動端還是pc端。根據不同裝置給vuex中的變量指派,首頁根據狀态值條件判斷顯示頁面哪一部分。(當然也可以設定兩個站點,一個m.xxxx.com, 一個www.xxxx.com 前端依據浏覽器是mobile還是pc來跳轉)

在APP.vue中

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);
		  if(flag){
				console.log('移動端打開');
		  }else{
		  	console.log("PC端打開")
		  }
	   }
  	},
	mounted(){
		this.isMobile();
	},
           

繼續閱讀