需求描述：
vue项目，pc端需兼容移动端，通过判断设备类型调整页面布局。
第一种方式：通过navigator.userAgent判断
const 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;
};
第二种方式：监听窗口的缩放
export default {
data() {
return {
isMobile: false,
};
},
beforeMount() {
window.addEventListener("resize", this.handleResize);
},
destroyed() {
window.removeEventListener("resize", this.handleResize);
},
mounted() {
this.isMobile = this.handleIsMobile();
},
methods: {
handleIsMobile() {
return document.body.getBoundingClientRect().width - 1 < 992;
},
handleResize() {
if (!document.hidden) {
this.isMobile = this.handleIsMobile();
}
},
}
}
