Navigator对象详解

Navigator对象概述

Navigator对象包含有关浏览器的信息

console.log(navigator)

userAgent属性 【重点】

var ua = navigator.userAgent;
console.log(ua)

win google  
"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"

试用场景

var browser = {
      versions: function() {
        var ua = navigator.userAgent;
        var versions = {
          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, //是否iPad
          webApp: ua.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
          weixin: ua.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
          qq: ua.match(/\sQQ/i) == " qq" //是否QQ
        }
        return versions;
      }(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase(),
      network: function() {
        var ua = navigator.userAgent;
        var networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other';
        networkStr = networkStr.toLowerCase().replace('nettype/', '');
        var network;
        switch (networkStr) {
          case 'wifi':
            network = 'wifi';
            break;
          case '4g':
            network = '4g';
            break;
          case '3g':
            network = '3g';
            break;
          case '3gent':
            network = '3g';
            break;
          case '2g':
            network = '2g';
            break;
          default:
            network = 'other';
        }
        return network;
      }()
    }

• 判断设备是否微信内置浏览器打开

if (browser.versions.weixin) {
    
}

• 判断设备是否移动端或者PC端

if (browser.versions.mobile) {
    
} else {
    
}

• 判断是ios设备还是android设备

if (browser.versions.ios) {
    
} else if(browser.versions.android){
    
}else {
    
}

总结

userAgent 浏览器数据收集、自适应等方向。

结束语

• 天生我才必有用
• 把所有平凡的事都做好