需求描述：
vue項(xiàng)目，pc端需兼容移動(dòng)端暖呕，通過(guò)判斷設(shè)備類型調(diào)整頁(yè)面布局聋庵。
第一種方式：通過(guò)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;
};
第二種方式：監(jiān)聽(tīng)窗口的縮放
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();
}
},
}
}
