解决一个页面判断是PC端还是移动端

Caomeiguoguo

于 2020-09-08 08:03:07 发布

阅读量265

点赞数 1

文章标签： vue html5

本文链接：https://blog.csdn.net/caomeiguoguo/article/details/108451818

版权

首先第一步

<script>
  data(){
    return {
      PcVisible:false,      //pc端的显示隐藏字段
      MobileVisible:false   //移动端的显示隐藏字段
    }
  }
</script>

第二步

<body>
  <div v-if="PcVisible"></div>
  <div v-if="MobileVisible"></div>
</body>

第三步

<script>
  //通过indexOf来判断有无Mobile,如果有的话就是移动端,反之就是PC端
  created(){
    let isMobile = navigator.userAgent.indexOf('Mobile')>-1;
    if(isMobile){
      that.MobileVisible=true;
      that.PcVisible=false;
    }else{
      that.PcVisible=true;
      that.MobileVisible=false;
    }
  }
</script>

根据以上的步骤就可以实现这一效果