前言:在前端工作中我们会考虑访问我们页面的所有设备,然后在根据设备的不同尺寸去匹配不同的样式
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()) {
console.log('this.isMobile: ', this.isMobile());
console.log("移动端");
// this.$router.replace("/pc_index");
} else {
console.log("pc端");
// this.$router.replace("/m_index");
console.log('navigator.userAgent: ', navigator.userAgent);
}
},
简单说一下思路:
- 使用navigator.userAgent获取到当前访问页面的设备====console.log('navigator.userAgent: ', navigator.userAgent);
2..match方法是用来检索这个字符串是否存在,相当于instanceof()这个api
上述方法中,不足之处在于,就是我们不容易知道市面上的所有设备,容易出现bug, 在做pc端与移动端切换时,还可以使用媒体查询(他是根据设备的尺寸来决定的-比较万能)----这个大家可以自己去百度