vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue不同浏览器类型判断

vue开发之不同浏览器的类型判断方式

作者：lihuanan123

这篇文章主要介绍了vue开发之不同浏览器的类型判断方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

一、通过navigator.userAgent来进行浏览器类型判断

定义和用法

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

一般来讲，它是在 navigator.appCodeName 的值之后加上斜线和 navigator.appVersion 的值构成的。

例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。

注：用户代理头：user-agent header。

语法

navigator.userAgent

navigator.userAgent使用场景

判断是Android或者iOS

/**
 * 判断浏览器类型：Android/iOS
 */
function getOSType() {
  if (/(Android)/i.test(navigator.userAgent)) {
    return 'Android'
  } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    return 'iOS'
  }
}

判断是否是微信浏览器

function is_weixin(){
  if (/(micromessenger)/i.test(navigator.userAgent)) {
    return true
  } else {
    return false
  }
}

判断是否是QQ浏览器

function is_qq(){
  if (/(MQQBrowser)/i.test(navigator.userAgent)) {
    return true
  } else {
    return false
  }
}

判断是手机端、平板还是PC

var os = function (){
    var ua = navigator.userAgent,
    isWindowsPhone = /(?:Windows Phone)/.test(ua),
    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
    isAndroid = /(?:Android)/.test(ua),
    isFireFox = /(?:Firefox)/.test(ua),
    isChrome = /(?:Chrome|CriOS)/.test(ua),
    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
    isPhone = /(?:iPhone)/.test(ua) && !isTablet,
    isPc = !isPhone && !isAndroid && !isSymbian;
    return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
    };
}();
 
if (os.isAndroid || os.isPhone) {
  console.log("手机")
} else if (os.isTablet) {
  console.log("平板")
} else if(os.isPc) {
  console.log("电脑")
}

navigator.userAgent格式

部分浏览器格式如下（PC）：

部分浏览器格式如下（移动端）：

二、通过navigator.platform来进行浏览器类型判断

因为各大浏览器厂商可以对navigator.userAgent进行设置，导致了userAgent格式的混乱。例如：华为mate10 默认浏览器 userAgent的信息如下：

Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.89 Safari/537.36

结果可想而知，根据userAgent做出的判断：当前浏览器类型为PC。所以需要在通过navigator.userAgent判断的基础上再对navigator.platform进行判断，以此来确保浏览器类型判断的准确性。

定义和用法

platform 属性是一个只读的字符串，声明了运行浏览器的操作系统和（或）硬件平台。

语法

navigator.platform

navigator.platform使用场景

判断是Android或者iOS

/**
 * 判断是Android或者iOS
 */
function getPlatformType() {
  if ('Android' === navigator.platform) {
    return 'Android'
  } else if ('iPhone' === navigator.platform || 'iPod' === navigator.platform || 'iPad' === navigator.platform) {
    return 'iOS'
  }
}

navigator.platform返回的可能值

> HP-UX
> Linux i686
> Linux armv7l
> Mac68K
> MacPPC
> MacIntel
> SunOS
> Win16
> Win32
> WinCE
> iPhone
> iPod
> iPad
> Android
>黑莓
>歌剧

三、通过屏幕尺寸来进行浏览器类型判断

通过屏幕大小可以判断浏览器类型

获取屏幕宽度的方法如下：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文