Carmineprince's Blog
首页
    • HTML
    • CSS
    • JavaScript
    • Vue
    • React
    • TypeScript
    • Node
    • Flutter
    • Electron
    • Python
    • 运维
    • 重学前端
  • 分类
  • 标签
  • 归档

Ziqi Wang

胡思乱想程序员
首页
    • HTML
    • CSS
    • JavaScript
    • Vue
    • React
    • TypeScript
    • Node
    • Flutter
    • Electron
    • Python
    • 运维
    • 重学前端
  • 分类
  • 标签
  • 归档
  • 从0开始搭建一套规范的Vue3.x项目工程环境
  • 解决vite构建vue3项目报错
  • 解决Vue3中无法使用$ref的问题
  • 项目中手动增加scss支持
  • el-table多选分页保留
  • 解决npm run dev启动两个页面问题
  • PC端和移动端兼容方案
  • SFC-Use-script-setup
  • vue2x面试前回炉重造
  • Vue3+Vite2配置
  • flvjs+vue 视频播放(手动追帧、断开重连、多个视频同时直播)
  • vue平滑滚动到指定位置
  • vant项目使用postcss-pxtorem和amfe-flexible 进行移动端适配
  • vue 使用v-html绑定时,内部元素不会继承外部css的解决方案
  • vue-awesome-swiper缩略图控制循环无效解决方案
  • 如何在Vue项目中优雅的使用svg图标
  • yarn报错及解决方案
  • vue3+ts+vite移动端vw适配方案
  • Vue项目中增加mockjs模拟接口请求
  • Nuxt相关

  • Vue3思考及跟Vue2相比的新变化总结
  • Vue相关
carmineprince
2021-10-20

PC端和移动端兼容方案

# PC端和移动端兼容方案

通过判断打开设备的类型,区分需要显示的方式和界面

//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;
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#移动端#vue#pc端
上次更新: 10/21/2021, 1:52:09 PM
解决npm run dev启动两个页面问题
SFC-Use-script-setup

← 解决npm run dev启动两个页面问题 SFC-Use-script-setup→

最近更新
01
pc端rem配置
03-02
02
使用动态变量ts报错的解决
02-25
03
React Hook详解
02-18
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Carmineprince | 鲁ICP备2021046263号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式