基于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 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
JS跨域问题详解
Nov 25 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
简单的vuex 的使用案例笔记
Apr 13 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 Javascript
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程序员编程注意事项
2008/04/10 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
php桥接模式应用案例分析
2019/10/23 PHP
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
物流管理应届生求职信
2013/11/07 职场文书
警示教育活动总结
2014/05/05 职场文书
贷款担保申请书
2014/05/20 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers
python3使用diagrams绘制架构图的步骤
2021/04/08 Python