移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别。于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的。
在App.vue文件中关键代码如下
export default {
name: "App",
mounted() {
if (this.isMobile()) {
this.$router.push("/mobileIndex");
} else {
this.$router.push("/pcIndex");
}
},
methods: {
isMobile() {
let flag = navigator.userAgent.match( // match方法可在字符串内检索指定的值,
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
// console.log(flag)
return flag;
}
}
};
通过浏览器navigator判断浏览器版本或者手机类型去跳转不同的路由
navigator
- navigator为Window对象的一个属性,指向了一个包含浏览器相关信息的对象。
- navigatot中包含了一些常用到的属性,如:
- navigator.appVersion 浏览器的版本号
- navigator.appName 浏览器的名称
- navigator.language 浏览器使用的语言
- navigator.platform 浏览器使用的平台
- navigator.userAgent 浏览器的user-agent信息
搜集了几个常用判断的方法 下面记录下
// ios设备
var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod');
// 安卓设备
var isAndroid = navigator.userAgent.match('Android');
// 微信内置浏览器
var isWeChat = navigator.userAgent.match('MicroMessenger');