vue - 判断终端以及浏览器

在日常开发中经常会碰到一些浏览器的兼容性问题，需要获取浏览器的一些信息去相对应的解决
如下：

1，新建utils.js 并导入代码

/*** 判断终端以及浏览器* userAgent string User-Agent信息*/
export const readUserAgent = () => {const ua = window.navigator.userAgent.toLowerCase();let data = {terminal: '',browser: '',terminalType: {},};data.terminalType = {trident: ua.indexOf('Trident') > -1, // IE内核presto: ua.indexOf('Presto') > -1, // opera内核webKit: ua.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1, // 火狐内核mobile: !!ua.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端android: ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1, // android终端iPhone: ua.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器iPad: ua.indexOf('iPad') > -1, // 是否iPadwebApp: ua.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部weixin: /MicroMessenger/i.test(ua), // 是否微信qq: ua.match(/\sQQ/i) === ' qq', // 是否QQ};// 判断品牌if (data.terminalType.ios || data.terminalType.iPhone || data.terminalType.iPad) {data.terminal = '苹果';} else if (data.terminalType.android) {data.terminal = '安卓';} else {data.terminal = 'PC';}// 判断浏览器if (/msie/i.test(ua) && !/opera/.test(ua)) {data.browser = 'IE';} else if (/firefox/i.test(ua)) {data.browser = 'Firefox';} else if (/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)) {data.browser = 'Chrome';} else if (/opera/i.test(ua)) {data.browser = 'Opera';} else if (/iPad/i.test(ua)) {data.browser = 'iPad';} else if (/webkit/i.test(ua) && !(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))) {data.browser = 'Safari';} else {data.browser = '未知';}return data;
};// 获取横竖屏状态
export const getOrientationStatu = () => {let orientationStatu;if (window.screen.orientation.angle == 180 || window.screen.orientation.angle == 0) {// 竖屏orientationStatu = '竖屏';}if (window.screen.orientation.angle == 90 || window.screen.orientation.angle == -90) {// 横屏orientationStatu = '横屏';}return orientationStatu;
};

2，按需引入

import { readUserAgent,getOrientationStatu } from '@/utils/utils.js';

3，使用案例演示

4，代码如下

<template><div class="mobile"><h1>移动端模拟</h1><van-button type="primary" class="line1" @click="getUA">获取当前终端和浏览器 </van-button><p>终端：{{ terminal }}</p><p>浏览器：{{ browser }}</p><van-button type="primary" class="line1" @click="getStatu">获取当前横屏或竖屏 </van-button><p>{{status}}</p></div>
</template><script>
import { readUserAgent,getOrientationStatu } from '@/utils/utils.js';
export default {props: {},data() {return {terminal: '',browser: '',status:'',};},methods: {getUA() {let data = readUserAgent();this.terminal = data.terminal;this.browser = data.browser;console.log('readUserAgent:', readUserAgent());},getStatu(){this.status = getOrientationStatu();}},
};
</script><style scoped lang="scss" src="./mobile.scss"></style>
<style lang="scss" scoped>
h1 {text-align: center;font-size: 16px;
}
.mobile{padding: 10px 20px;
}
</style>

vue - 判断终端以及浏览器相关推荐

Vue - 判断终端是否为：IE内核、opera内核、苹果、谷歌内核、火狐内核、是否为移动终端、ios终端、android终端、是否为iPhone或者QQHD浏览器、是否iPad、是否微信、是否QQ
前言在 Vue 项目中,您可能需要判断用户使用的设备,来适应不同的操作. 本文示例,可帮助您判断是否是: IE内核.opera内核.苹果.谷歌内核.火狐内核.是否为移动终端.ios终端.androi ...
javascript判断浏览器和终端类型，js如何区分手机、电脑终端和浏览器
判断浏览器类型复制代码代码如下: if ( window.sidebar && "object" == typeof( window.sidebar ) & ...
vue检测是不是360浏览器兼容模式_vue开发之不同浏览器的类型判断
一.通过navigator.userAgent来进行浏览器类型判断定义和用法 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. 一般来讲,它是在 nav ...
如何判断各种手机浏览器？
为什么80%的码农都做不了架构师?>>> 前端 js判断 var browser = {versions: function () {var u = navigator.use ...
第三方浏览器h5 android测试,H5案例分享：使用JS判断客户端、浏览器、操作系统类型...
使用JS判断客户端.浏览器.操作系统类型一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...
JS使用userAgent判断操作系统和浏览器类型
1.应用场景: 在做ios和android应用时,需要扫码进行应用的下载,可以通过扫描一个二维码,然后跳到指定的页面,页面中使用js判断操作系统和浏览器类型,然后给出不同的下载地址.这样就可以实现an ...
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包,度娘上好多说的是在 vue.config.js 配置 productionSourceMap: false 即可,然 ...
JS判断是PC浏览器还是手机端浏览器
JS判断是电脑浏览器还是手机端浏览器,并根据不同的终端跳转到不同的网址 <!DOCTYPE html> <html> <script> function brows ...

vue - 判断终端以及浏览器

vue - 判断终端以及浏览器相关推荐

最新文章

热门文章