如何判断是PC端还是移动端

2023-10-27

// app.vue 中

 mounted() {

    if (this.browser().mobile || this.browser().android || this.browser.ios || document.body.clientWidth < 787) { // 判断是否是移动端
      console.log('这里是移动端')
    } else {
      console.log('这里是pc端')
    }
    window.addEventListener('resize', () => {
      if (this.browser().mobile || this.browser().android || this.browser.ios || document.body.clientWidth < 787) { // 判断是否是移动端
        console.log('这里是移动端')
      } else {
        console.log('这里是pc端')
      }
    })
  },
  methods: {
    browser() { // 获取浏览器UA标识
      var u = navigator.userAgent;
      console.log(u)
      // Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36
      return {
        trident: u.indexOf('Trident') > -1, // IE内核
        presto: u.indexOf('Presto') > -1, // opera内核
        webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
        iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, // 是否iPad
        webApp: u.indexOf('Safari') === -1, // 是否web应该程序,没有头部与底部
        weixin: u.indexOf('MicroMessenger') > -1, // 是否微信 (2015-01-22新增)
        qq: u.match(/\sQQ/i) === ' qq' // 是否QQ
      };
    }

  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何判断是PC端还是移动端 的相关文章

随机推荐

  • Type Library

    Type Library A typelib stores information about a COM object The classid the interfaces that the object supports the met
  • 自定义异常(实现登录)

    目录 异常 在Java中 将程序执行过程中发生的不正常行为称为异常 为什么要自定义异常呢 实现异常 用户登录功能 前言 在写自定义异常之前 我们要先简单了解何为异常 为什么要自定义异常 异常 在Java中 将程序执行过程中发生的不正常行为称
  • UI和UI有什么不同,是如何协助的

    UX 用户体验 和UI 用户界面 是一个常用的术语 然而 尽管有复杂的联系 但网页设计的两个领域是两个不同的东西 事实上 有可能有一个用户界面优秀但用户体验差的网站 因此 了解UX和UI良好的网页设计非常重要 这里简要介绍一下 UX和UI它
  • 数据库的设计(E-R图,数据库模型图,三大范式)

    一 数据库设计的概念 数据库设计是将数据库中的数据实体及这些数据实体之间的关系 进行规划和结构化的过程 二 数据库设计的重要性 如果一个数据库没有进行一个良好的设计 那么这个数据库完成之后他的缺点是 1 效率会很低 2更新和检索数据时会出现
  • SpringMVC使用stringHttpMessageConverter

    SpringMVC使用stringHttpMessageConverter 场景演示 解决方法 场景演示 当使用 ReponseBody注解的时候 我们知道返回值会被转换成 Json格式 然而里面的中文可能会被转换成乱码 如下面代码中的 测
  • 18.一篇文章,从源码深入详解ThreadLocal内存泄漏问题

    1 造成内存泄漏的原因 threadLocal是为了解决对象不能被多线程共享访问的问题 通过threadLocal set方法将对象实例保存在每个线程自己所拥有的threadLocalMap中 这样每个线程使用自己的对象实例 彼此不会影响达
  • 【笔记总结】C++面向对象三大特征(四大特征)

    C 面向对象的三大特征 四大特征 三大特征 封装 继承 多态 四大特征 抽象 封装 继承 多态 一 类和对象 什么是类 什么是对象 类和对象的区别 类是数据类型 是具有相同属性和服务的一组对象的集合 对一类对象的抽象就是类 对象即观察研究对
  • 转换vmware的vmdk格式为qcow2格式

    一 系统环境 操作系统 Win11 虚机系统 VMware Workstation 16 Pro 16 2 3 build 19376536 转换工具 qemu 8 0 2 二 下载安装qemu模拟器 查看qemu版本 Download Q
  • Python强大的内置模块collections

    1 模块说明 collections 是 Python 的一个内置模块 所谓内置模块的意思是指 Python 内部封装好的模块 无需安装即可直接使用 collections 包含了一些特殊的容器 针对 Python 内置的容器 例如 lis
  • C语言和指针数组有关的一些题目

    文章目录 一 一维数组的大小 二 字符数组 2 1 2 2 2 3 三 二维数组 四 指针笔试题 4 1 4 2 4 3 4 4 4 5 4 6 4 7 4 8 一 一维数组的大小 数组名的意义 1 sizeof 数组名 这里的数组名表示整
  • matlab数据过大,无法正常保存

    matlab存储数据时 存储不进mat文件 如下存在三个为1KB的文件 便是存储不成功的 这是因为对于过大的文件 大于2GB的变量 需要使用MAT file版本7 3或更高版本 解决方法如下 进入matlab 主页 点击 预设 按钮 选择
  • el-input和el-select的框的宽度设置成一致的。

    其实在el select的底层其实就是el input 只要将el select加一个属性 就是将其width设置为100 原因是什么呢 有待研究
  • BTC-匿名性

    Bitcoin and anonymity 比特币中不要求用真名 可以用公钥产生的地址 可以产生任意多的地址 用不同的地址干不同的事情 用的是化名 也被叫做pseudonymity 一般来说 匿名性多与隐私保护相关 但实际上 比特币中的匿名
  • DynamicDet: A Unified Dynamic Architecture for Object Detection 一个目标检测器的通用动态架构

    目录 检测代码 本文分享 CVPR 2023 论文 DynamicDet A Unified Dynamic Architecture for Object Detection 北京大学王选计算机研究所王勇涛团队所提出的一个目标检测器的通用
  • matlab练习程序(对应点集配准的四元数法)

    这个算是ICP算法中的一个关键步骤 单独拿出来看一下 算法流程如下 1 首先得到同名点集P和X 2 计算P和X的均值up和ux 3 由P和X构造协方差矩阵sigma 4 由协方差矩阵sigma构造4 4对称矩阵Q 5 计算Q的特征值与特征向
  • 记录--手把手教你Vue+ECharts+高德地图API实现天气预报数据可视化

    这里给大家分享我在网上总结出来的一些知识 希望对大家有所帮助 前言 所谓数据可视化 我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比 走向 对于数据可视化 很多互联网公司是很看重这一块的 包括大厂 就比如阿里的淘宝 双十一的时候往往
  • 【小沐学NLP】关联规则分析Apriori算法(Mlxtend库,Python)

    文章目录 1 简介 2 Mlxtend库 2 1 安装 2 2 功能 2 2 1 User Guide 2 2 2 User Guide data 2 2 3 User Guide frequent patterns 2 3 入门示例 3
  • 随机变量序列的两种收敛性

    随机变量序列的收敛性有多种 其中常用的是两种 依概率收敛和依分布收敛 大数定律涉及的是一种依概率收敛 中心极限定理涉及的是依分布收敛 1 依概率收敛 为什么要研究随机变量序列的收敛性 依概率收敛的定义 依概率收敛于常数的四则运算 2 依分布
  • 简单HTML的使用

    1 html的简介 什么是html HyperText Markup Language 超文本标记语言 网页语言 超文本 超出文本的范畴 使用html可以轻松实现这样的操作 标记 html所有的操作都是通过标记实现的 标记就是标签 lt 标
  • 如何判断是PC端还是移动端

    app vue 中 mounted if this browser mobile this browser android this browser ios document body clientWidth lt 787 判断是否是移动端