基于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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
layui表格设计以及数据初始化详解
Oct 26 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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
django使用xadmin的全局配置详解
2019/11/15 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
css3 transform属性详解
2014/09/30 HTML / CSS
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
《分一分》教学反思
2014/04/13 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
学校捐款活动总结
2015/05/09 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python