vue判断设备是手机端还是pc端

Vue框架判断当前设备是PC还是移动端

实际开发工作中会经常遇到一个需求，就是判断当前登录网页的设备是PC还是移动，要求PC端和移动端显示的是不同的网页内容。
那么我们就需要对当前登录设备进行判断。

全局

main.js

Vue.prototype.$equipment=function(){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;
}

需要用到的vue页面

<template><div><div v-if="this.$equipment !== null"><mobile-page></mobile-page></div><div v-else><pc-page></pc-page></div></div>
</template>

局部

router.js

routes: [{path: '',redirect: '/pc_index'},{path: "/pc_index", // pc端首页name: PcIndex,component: PcIndex},{path: '/m_index', // 手机端首页name: MIndex,component: MIndex}]

在 App.vue 的 mounted 方法中对设置进行判断，如下:

mounted() {if (this._isMobile()) {alert("手机端");this.$router.replace('/m_index');} else {alert("pc端");this.$router.replace('/pc_index');}}

在 App.vue 的 methods方法中做手机型号设置，如下:

  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;}}

js判断设备是手机还是PC还是ipad

    const device = navigator.userAgentif (device.indexOf('iPad') > -1) {//  ipad } else if (device.indexOf('Android') > -1 || device.indexOf('ios') > -1) {// 手机} else {// 电脑}

https://juejin.cn/post/7033793636760453133

vue判断设备是手机端还是pc端相关推荐

JS判断设备是手机端还是PC端，并加载不同的css/js文件
最近公司有个页面需要做pc端和手机端的页面自适应,即手机打开是指定的样式,pc打开则是pc指定的样式,样式是前端ui已经设计好了的. 所以这里需要通过Navigator userAgent 属性判断浏 ...
vue-判断设备是手机端还是pc端
经常在项目中会有支持 pc 与手机端需求.并且pc与手机端是两个不一样的页面.这时就要求判断设置,根据不同的设置跳转不同的路由. [代码演示] 在 router/index.js 中有两个页面. ex ...
判断浏览器是手机端还是pc端以及判断安卓还是iOS
// 方法一 function IsPC() {var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...
php 判断来源微信客户端_PHP判断手机端、PC端、微信代码实例
欢迎大家关注我的其他Github博客和CSDN博客,互相交流! 在这里博主为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 ...
微信php示例代码,PHP判断手机端、PC端、微信示例代码分享
在这里博主为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 1.判断是否是手机端function isMobile() { ...
php判断客户端是微信,PHP判断是手机端还是PC端以及PHP判断是否是微信浏览器
这篇文章主要为大家详细介绍了PHP判断是手机端还是PC端,以及PHP判断是否是微信浏览器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了PHP判断的两个实例,一是PHP判断是手 ...
php判断移动端和pc端访问_PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
本文实例为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 1.判断是否是手机端 function isMobile() { ...
html页面判断是手机端访问,JS 判断手机端和pc端后跳转对应页面
判断手机端和pc端 (function () { var sUserAgent = navigator.userAgent; if (sUserAgent.indexOf('Android') > ...
phpcmsv9实现手机端与PC端双模板的方法与详细教程(转)
现在随着智能手机的兴起,我们网站开发移动端版本也显得越来重要了,但是现在phpcms还没有开发手机版,下面我们就教大家如何让phpcms实现手机版访问,一般正常情况下我们电脑版的域名为http://w ...
nginx之自动识别手机端和pc端
Detect Mobile Browsers Detect Mobile Browsers 是外国的一套可以自动适配手机端和pc端的脚本代码.有Apache ASP ASP.NET ColdFusio ...

vue判断设备是手机端还是pc端

Vue框架判断当前设备是PC还是移动端

vue判断设备是手机端还是pc端相关推荐

最新文章

热门文章