基于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 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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获取QQ头像并显示的方法
2014/12/23 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
python中函数传参详解
2016/07/03 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Django admin组件的使用
2020/10/24 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
养殖项目策划书范文
2014/01/13 职场文书
给学校的建议书
2014/03/12 职场文书
保护动物倡议书
2014/04/15 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
先进个人评语大全
2015/01/04 职场文书
大学军训决心书
2015/02/05 职场文书
好人好事新闻稿
2015/07/17 职场文书
安全生产奖惩制度
2015/08/06 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python