vue网页 PC端和移动端兼容方案
一,通过媒体查询实现响应式(@media)优点:适用于小型网页,用户交互较少的项目,代码用量较少;缺点:在页面内容过多,用户交互过多的时候,如果通过 @media 来一个个改的话,那代码量可就很多了,而且也不方便维护。因此需要另一种方式来解决这个问题。二,通过判断打开设备的类型,区分需要显示的方式和界面//App.vuemounted() {if (this._isMobile()) {alert
·
一,通过媒体查询实现响应式(@media)
优点:适用于小型网页,用户交互较少的项目,代码用量较少;
缺点:在页面内容过多,用户交互过多的时候,如果通过 @media 来一个个改的话,那代码量可就很多了,而且也不方便维护。因此需要另一种方式来解决这个问题。
二,通过判断打开设备的类型,区分需要显示的方式和界面
//App.vue
mounted() {
if (this._isMobile()) {
alert("手机端");
// this.$router.replace('/m_index');
} else {
alert("pc端");
// this.$router.replace('/pc_index');
}
},
methods: {
//App.vue
_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;
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)