技术教程 vue开发之不同浏览器的类型判断方式 正文

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

2022-10-14,

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

目录
  • 一、通过navigator.userAgent来进行浏览器类型判断
    • 定义和用法
    • 语法
    • navigator.userAgent使用场景
      • 判断是Android或者iOS
      • 判断是否是微信浏览器
      • 判断是否是QQ浏览器
      • 判断是手机端、平板还是PC
    • navigator.userAgent格式
    • 二、通过navigator.platform来进行浏览器类型判断
      • 定义和用法
        • 语法
          • navigator.platform使用场景
            • 判断是Android或者iOS
          • navigator.platform返回的可能值
          • 三、通过屏幕尺寸来进行浏览器类型判断

            一、通过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）：

            • chrome浏览器：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
            • IE11浏览器：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; McAfee; rv:11.0) like Gecko
            • safari 5.1 – MAC：User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
            • safari 5.1 – Windows：User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
            • Firefox 4.0.1 – MAC：User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
            • Firefox 4.0.1 – Windows：User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
            • Opera 11.11 – MAC：User-Agent:Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11
            • Opera 11.11 – Windows：User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
            • 360浏览器：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)
            • 搜狗浏览器 1.x：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.X MetaSr 1.0; SE 2.X MetaSr 1.0; .NET CLR 2.0.50727; SE 2.X MetaSr 1.0)

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

            • iphone6：Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
            • ipad：Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
            • Android QQ浏览器 For android：User-Agent: MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
            • Windows Phone：User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)
            • BlackBerry：User-Agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+
            • UC标准：User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999

            二、通过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
            >黑莓
            >歌剧

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

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

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

            • 网页可见区域宽：document.body.clientWidth
            • 网页可见区域高：document.body.clientHeight
            • 网页可见区域宽：document.body.offsetWidth (包括边线的宽)
            • 网页可见区域高：document.body.offsetHeight (包括边线的宽)

            以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。

            您可能感兴趣的文章:

            • vue中h5端打开app(判断是安卓还是苹果)
            • vue实现与安卓、IOS交互的方法
            • vue如何判断安卓还是IOS

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

            下载本文的Word格式文档，以方便收藏与打印。

            Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!