基于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面向对象入门基础详细介绍
Sep 05 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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使用smtp发送支持附件的邮件示例
2014/04/13 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
php实现简单爬虫的开发
2016/03/28 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
《四季》教学反思
2014/04/08 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
工会工作个人总结
2015/03/03 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
vue实现登陆页面开发实践
2022/05/30 Vue.js