教你实现pc移动端两套代码拆分

文章介绍了在移动互联网时代处理PC和移动端兼容性问题的常见方法,如媒体查询、双套样式等。然后提出了一种基于Vue的解决方案,通过创建Pc和Mobile文件夹,拆分路由表,根据屏幕宽度或设备型号动态加载不同路由,从而实现PC和移动端的交互与布局差异化管理。这种方法适用于处理页面较多且注重用户交互的项目。
摘要由CSDN通过智能技术生成

在现在移动互联网的时代,在项目中我们通常会遇到需要解决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
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值