基于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中函数声明优先于变量声明的实例分析
Mar 01 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
JavaScript接口实现方法实例分析
May 16 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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JS验证码实现代码
2017/09/14 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
标准版离职证明书
2014/09/12 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
夫妻吵架保证书
2015/05/08 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL