基于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 相关文章推荐
Javascript 构造函数 实例分析
Nov 26 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
个人委托书怎么写
2014/04/04 职场文书
创先争优活动心得体会
2014/09/04 职场文书
人生遥控器观后感
2015/06/11 职场文书
师范生见习自我总结
2015/06/23 职场文书
导游词之河北野三坡
2019/12/11 职场文书