基于VUE实现判断设备是PC还是移动端

2024-10-23 19:19:57

实际开发工作中会经常遇到一个需求，就是判断当前登录网页的设备是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 类型。

根据当前设备的视口宽度判断是否是移动端设备。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

在VUE中实现文件下载并判断状态的方法

新增JS页面 axiosExport.JS // Axios拦截请求并实现下载 import axios from 'axios' // download url export const downloadUrl = (url) => { console.log(url) let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = func
vue-router判断页面未登录自动跳转到登录页的方法示例

1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录下面的两个页面,登录页不需要检测,首页需要检测 const routers = [ { path: '/', component: App, children: [ { path: '/login', component: Login, meta: { title: '登录' } }, { path: '/home', component: Home, meta: { title: '首页', re
vue组件中watch props根据v-if动态判断并挂载DOM的问题

问题复现:父组件中通过名为 source 的 prop 向子组件 Chart 传入数据 <Chart :source="chartData"></Chart> import Chart from '../components/Chart' export default { name: 'Home', components: { Chart }, data () { return { chartData: [] } }, mounted () { setTimeo
Vue中v-show添加表达式的问题(判断是否显示)

一.需求场景 1.先来说说我的需求,有数据来源和标签类型两行选项,如下图所示: 2.根据需求,我需要在点击上面的某个数据来源的时候,下面的标签类型自动切换, 需求说明如下: 3.一开始是想写死的,就是把各种情况写死在页面上,后来查看官方文档一会,数据来源的集合可以这样写,id为各个类型的标识,name为名称,mark为点击某个数据来源的时候标签类型根据当前点击的数据来源进行判断切换.如下图: infoTypeList: [ { id: 11, name: '新闻', mark: 'news'
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

最近学了点vuejs,把学的东西记录下来方便你我他. vuejs的官方文档:https://vuejs.org/v2/api/ (还是要习惯看官方文档啊同志们~) 1. v-for进行遍历比如我这里想遍历videos里的所有元素,那么我输入 <div v-for="v in videos"> <a :href="v" rel="external nofollow" >啦啦啦</a> </div>
vue中根据时间戳判断对应的时间(今天昨天前天)

根据时间戳来显示对应的时间段本文是根据vue缩写,但是原理都是想通的根据一个时间戳,然后来显示对应的时间段.如果为今天,则显示对应的time,如果为昨天,则显示为昨天,如果为前天,则显示为前天.剩下的显示为对应的日期需求定义好了,然后开始实现: 首先,是把时间戳转换为对应的时间格式,js提供了原生的获取对应年.月.日等格式的方法,但是不够灵活,这里提供了一个网上找的比较灵活获取固定格式的函数. const formatDate = (date, fmt) => { date = new
Vue条件循环判断+计算属性+绑定样式v-bind的实例

Vue.js条件与循环 1.条件判断 (1)v-if, <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> </template> </div> <script> new Vue({ el:'#app', data:{ seen:true,
基于VUE实现判断设备是PC还是移动端

实际开发工作中会经常遇到一个需求,就是判断当前登录网页的设备是PC还是移动,要求PC端和移动端显示的是不同的网页内容. 那么我们就需要对当前登录设备进行判断. 使用 navigator.userAgent 字符串检测我是在PC端开发完接到要做移动端的需求,而且移动端只有一个页面,我就统一放在了一个文件夹内. 首先在 app.vue 文件内,判断当前设备是pc端还是移动端. methods: { // 添加判断方法 isMobile() { let flag = navigator.userAg
js判断设备是否为PC并调整图片大小

复制代码代码如下: <html> <head> <script type="text/javascript"> /* 判断设备是否为PC */ function isPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS","Win
cropper js基于vue的图片裁剪上传功能的实现代码

前些日子做了一个项目关于vue项目需要头像裁剪上传功能,看了一篇文章,在此基础上做的修改完成了这个功能,与大家分享一下.原文:http://www.jb51.net/article/135719.htm 首先下载引入cropper js, npm install cropper js --save 在需要的页面引入:import Cropper from "cropper js" html的代码如下: <template> <div id="demo&quo
基于Vue的移动端图片裁剪组件功能

最近项目上要做一个车牌识别的功能.本来以为很简单,只需要将图片扔给后台就可以了,但是经测试后识别率只有20-40%.因此产品建议拍摄图片后,可以对图片进行拖拽和缩放,然后裁剪车牌部分上传给后台来提高识别率.刚开始的话还是百度了一下看看有没有现成的组件,但是找来找去都没有找到一个合适的,还好这个功能不是很着急,因此自己周末就在家里研究一下. Demo地址:https://vivialex.github.io/demo/imageClipper/index.html 下载地址:https://git
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un
基于vue的下拉刷新指令和滚动刷新指令

小编最近在实现移动端列表页面显示的时候一直在思考如何实现列表的自动更新数据,对于大多数Native App或者Web App,在列表的底部增加"加载更多"的按钮也是解决这样的问题一种交互的方式,当然,这样的交互其实还好,不过根据用户的操作习惯来看,似乎滚动刷新更多数据和下拉刷新当前数据的操作方式,更符合用户对列表分页数据的读取习惯,因此,在这里小编想简单的说说,这次在小编系统中所使用的下拉刷新和滚动刷新的实现方式! 其实,这种实现数据加载的原理很简单在滚动刷新的时候,需要在列表滚动到
Mint UI 基于 Vue.js 移动端组件库

官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引
详解基于vue的移动web app页面缓存解决方案

现在移动web app越来越热门了,许多公司开始尝试使用angular.react.vue等MVVM框架来开发单页架构的web app.但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题: 识别前进后退行为后退时恢复之前的页面笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路. 识别前进后退先说第一个问题.和原生app不一样,浏览器中主要有这几个限制: 没有提供前进后退的
基于vue实现swipe分页组件实例

项目背景图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如 Swiper . 但是当我们项目中的图片轮播只需要一个很简单的轮播样式,比如这样的我们引用这样一个 110k 的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图当当当当~~~ 我们今天的主角登场了, thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有 14.2k ,真真的轻量级啊.还有,还有翻译一下,就是俺们全支持,不管你是PC端(IE7+)
基于 Vue 的树形选择组件的示例代码

本文介绍了基于 Vue 的树形选择组件.分享给大家,具体如下: 系统要求:Vue 2 基本特性完美的多级联动效果支持无限多的分级有全选.半选.不选三种状态截图展示代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="https://v1-c

基于VUE实现判断设备是PC还是移动端

相关推荐

随机推荐