基于VUE实现判断设备是PC还是移动端


Posted in Javascript onJuly 03, 2020

实际开发工作中会经常遇到一个需求,就是判断当前登录网页的设备是PC还是移动,要求PC端和移动端显示的是不同的网页内容。

那么我们就需要对当前登录设备进行判断。

使用 navigator.userAgent 字符串检测

我是在PC端开发完接到要做移动端的需求,而且移动端只有一个页面,我就统一放在了一个文件夹内。
首先在 app.vue 文件内,判断当前设备是pc端还是移动端。

methods: {
 // 添加判断方法
 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;
  }
},
mounted: {
 if(this.isMobile) {
  alert("移动端");
  this.$router.replace('/pc_index');
 }else {
  alert("pc端");
  this.$router.replace('/m_index');
 }
}

接下来就略微介绍一下这个方法,其中用到了 navigator.userAgent 。

这个方法会返回一个只读的字符串,声明了浏览器在发送 http 请求时的用户代理头的值。例如:

<script>
 document.write("用户代理:" + navigator.userAgent)
</script>

// pc端输出结果:
用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
// 移动端输出结果:
用户代理: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

.match 方法用于在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,返回值是检索到的值。
类似的方法还有 indexOf()、laseIndexOf(),但是这两个方法返回的是匹配到的值的位置。
所以在判断方法中使用.match方法匹配所有的移动端型号,最后加的 /i 是表示不区分大小写。

使用 window.matchMedia() 检测

也就是利用媒体查询的方式进行判断。

window.matchMedia 方法会返回一个新的 mediaQueryList 对象,表示指定的媒体查询字符串解析后的结果。例如:

var result = window.matchMedia("(min-width: 400px)").matches;
console.log(result) //true

window.matchMedia 方法会返回两个参数,一个是 media,就是查询的语句内容。另一个是 matches,是返回的结果,为 boolean 类型。

根据当前设备的视口宽度判断是否是移动端设备。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
JavaScript如何判断对象有某属性
Jul 03 #Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 #Javascript
JS常见错误(Error)及处理方案详解
Jul 02 #Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 #Javascript
Vue使用预渲染代替SSR的方法
Jul 02 #Javascript
node运行js获得输出的三种方式示例详解
Jul 02 #Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 #Javascript
You might like
php数据库配置文件一般做法分享
2012/07/07 PHP
php中hashtable实现示例分享
2014/02/13 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
js DOM模型操作
2009/12/28 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
JS中的回调函数实例浅析
2018/03/21 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
幼教个人求职信范文
2013/12/02 职场文书
家长评语大全
2014/01/22 职场文书
机械工程师岗位职责
2014/06/16 职场文书
太行山上观后感
2015/06/05 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
数据库连接池
2021/04/06 MySQL
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL