在现在移动互联网的时代,在项目中我们通常会遇到需要解决pc和移动端同时兼容的问题。
常见的方法一般通过以下来实现
1.设置媒体查询,通过设置最小宽度来控制页面
2.通过书写两套不同的样式来实现pc和移动不一样的布局
3.通过设置宽度百分比
........
以上几种,相信大家都有遇到过,但是pc和移动端除了布局,往往交互都相差很大,又要保证布局,又要保证交互的情况下,那么以上几种,明显就不好控制了,而且上面的几种方法,如果只是用来处理一些页面较少。不太注重用户交互的时候还是挺方便的,但是如果页面一多起来,那么我们需要去写大量的css来兼容。下面教你如何实现pc,移动拆分。
1.首先我们搭建一个vue项目,后在src下新建Pc,Mobile,两个文件夹,其他都可公用。
找到App.vue这个文件,这个文件是整个项目的入口页面,通过router-view浏览主页面,那么我们就采取将路由表拆分成两个,pc和移动路由。
通过实时监听屏幕宽度来区分pc还是移动端
当然也可以通过判断设备型号来判断是pc还是移动端
function isMobile() {
let userAgentInfo = navigator.userAgent;
let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
let getArr = Agents.filter(i => userAgentInfo.includes(i));
return getArr.length ? true : false;
}
const res = isMobile()
如果是pc端,就走pc的路由,是移动端就走移动端的路由,那么找到路由文件
建立两个路由表,然后判断是pc还是移动走哪个路由,我们可以看到如果屏幕宽度小于758,就把移动路由表赋给routes,否则就走pc路由表。
定时器是用来一直拉窗口大小来节流的
var routes = [];
const screenWidth = ref()
screenWidth.value = document.body.clientWidth
if (screenWidth.value <= 758) {
console.log('is Mobile');
routes = routerMb
} else {
routes = routerPc
}
window.onresize = () => {
screenWidth.value = document.body.clientWidth;
}
watch(screenWidth, (newVal, oldVal) => {
let timer = setTimeout(() => {
if (newVal <= 758) {
console.log('is Mobile');
routes = routerMb
window.location.reload()
} else {
routes = routerPc
window.location.reload()
}
// 重绘页面
}, 500)
return () => {
clearTimeout(timer)
}
}, {
deep: true,
})
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
// 路由发生变化,页面自动滚动到顶部
scrollBehavior() {
return { left: 0, top: 0 }
},
routes
})
export default router