详细判断浏览器运行环境，值得一看

前言

创新互联建站于2013年成立，是专业互联网技术服务公司，拥有项目成都做网站、网站建设、外贸营销网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元秦安做网站,已为上家服务,为秦安各地企业和个人服务,联系电话:18982081108

看到标题，大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用，既可以用PC浏览器访问，也可以用手机浏览器访问，再加上现在智能设备的推广，我们甚至能在车载系统、穿戴设备和电视平台上访问。

设备的多样化让用户无处不在，有时候我们需要根据不同的浏览器运行环境做出对应的处理。浏览器是JavaScript的承载体，我们可以从浏览器上获取相关的信息，来进一步处理我们的业务逻辑。

然而浏览器品牌众多，有些浏览器使用的标准也不太一样，造就了难以统一的判断。下面我大概罗列一下常用的浏览器品牌和在什么情况下使用浏览器运行环境判断。浏览器相关统计数据可以参考这里。

国际五大浏览器品牌：按照全球使用率降序排列

  •  Google Chrome：Windows、MacOS、Linux、Android、iOS
  •  Apple Safari：MacOS、iOS
  •  Mozilla Firefox：Windows、MacOS、Linux、Android、iOS
  •  ASA Opera：Windows、MacOS、Linux、Android、iOS
  •  Microsoft Internet Explorer或Microsoft Edge：Windows

国产常用浏览器品牌：按照国内使用率降序排列，普遍基于开源项目Chromium进行开发

  •  微信浏览器
  •  QQ浏览器
  •  UC浏览器
  •  2345浏览器
  •  搜狗浏览器
  •  猎豹浏览器
  •  遨游浏览器
  •  百度浏览器：百度在2019年04月30日宣布停止服务
  •  其他浏览器：很多很多，数不清，我就不列出来了

顺便吐槽一下这个不要脸的红芯浏览器，明明就是基于Chromium进行二次开发再套多一层外壳，还非得说自己开发的浏览器是世界第五大浏览器，偷吃不抹嘴，还是被眼尖的网友发现了。详情请戳one、two、three。。。。

使用场景

  •  判断用户浏览器是桌面端还是移动端，显示对应的主题样式
  •  判断用户浏览器是Android端还是iOS端，跳转到对应的App下载链接
  •  判断用户浏览器是微信端还是H5端，调用微信分享或当前浏览器分享
  •  获取用户浏览器的内核和载体，用于统计用户设备平台分布区间
  •  获取用户浏览器的载体版本，用于提示更新信息
  •  其实还有很多使用场景，就不一一举例了

原理

针对处理一个这样的使用场景，其实有一个比较专业的名字，叫做浏览器指纹。我们上面谈到的需求也只是浏览器指纹方案里面的一小部分，而我们需要使用到的浏览器指纹就是UserAgent。

这个UserAgent是何方神圣呢，中文翻译过来就是用户代理。引用百度的定义，就是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器载体及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。而这些信息也足够我们去判断浏览器运行环境了。

准备

目前网上很多解决方法都只是针对系统是否是桌面端还是移动端，Android端还是iOS端，部分浏览器载体的判断和获取等等，没有一个比较完美或者终极的解决方案。

因此我用了很多测试平台整理出一个比较全面的解决方案。这个方案包含浏览器系统及版本、浏览器平台、浏览器内核及版本、浏览器载体及版本、浏览器外壳及版本。

而此方案也是基于navigator.userAgent获取相关浏览器信息(如下)，再通过系统、平台、内核、载体、外壳的特有字段进行归类统一，整理出一个完整的浏览器运行环境。

 
 
 
 
    
  
  
  
  
  1. const ua = navigator.userAgent.toLowerCase();  
    2.   
  
  
  
  2. // 输出  
    3.   
  
  
  
  3. "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1" 
    4.

浏览器信息：权重按照以下降序排列

  •  浏览器系统：所运行的操作系统，包含Windows、MacOS、Linux、Android、iOS
  •  浏览器平台：所运行的设备平台，包含Desktop桌面端、Mobile移动端
  •  浏览器内核：浏览器渲染引擎，包含Webkit、Gecko、Presto、Trident
  •  浏览器载体：五大浏览器品牌，包含Chrome、Safari、Firefox、Opera、Iexplore/Edge
  •  浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌

获取UserAgent是否包含字段：判断是否包含系统、平台、内核、载体、外壳的特有字段

 
 
 
 
    
  
  
  
  
  1. const testUa = regexp => regexp.test(ua); 
    2.

获取UserAgent对应字段的版本

 
 
 
 
    
  
  
  
  
  1. const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); 
    2.

方案

上述准备工作完成后，我们就按照权重(系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本)根据系统、平台、内核、载体、外壳的特有字段来归类统一浏览器运行环境。

系统+系统版本

 
 
 
 
    
  
  
  
  
  1. // 系统  
    2.   
  
  
  
  2. let system = "unknown";  
    3.   
  
  
  
  3. if (testUa(/windows|win32|win64|wow32|wow64/ig)) {  
    4.   
  
  
  
  4.     system = "windows"; // window系统  
    5.   
  
  
  
  5. } else if (testUa(/macintosh|macintel/ig)) {  
    6.   
  
  
  
  6.     system = "macos"; // macos系统  
    7.   
  
  
  
  7. } else if (testUa(/x11/ig)) {  
    8.   
  
  
  
  8.     system = "linux"; // linux系统  
    9.   
  
  
  
  9. } else if (testUa(/android|adr/ig)) {  
    10.   
  
  
  
  10.     system = "android"; // android系统  
    11.   
  
  
  
  11. } else if (testUa(/ios|iphone|ipad|ipod|iwatch/ig)) {  
    12.   
  
  
  
  12.     system = "ios"; // ios系统  
    13.   
  
  
  
  13. }  
    14.   
  
  
  
  14. // 系统版本  
    15.   
  
  
  
  15. let systemVs = "unknown";  
    16.   
  
  
  
  16. if (system === "windows") {  
    17.   
  
  
  
  17.     if (testUa(/windows nt 5.0|windows 2000/ig)) {  
    18.   
  
  
  
  18.         systemVs = "2000";  
    19.   
  
  
  
  19.     } else if (testUa(/windows nt 5.1|windows xp/ig)) {  
    20.   
  
  
  
  20.         systemVs = "xp";  
    21.   
  
  
  
  21.     } else if (testUa(/windows nt 5.2|windows 2003/ig)) {  
    22.   
  
  
  
  22.         systemVs = "2003";  
    23.   
  
  
  
  23.     } else if (testUa(/windows nt 6.0|windows vista/ig)) {  
    24.   
  
  
  
  24.         systemVs = "vista";  
    25.   
  
  
  
  25.     } else if (testUa(/windows nt 6.1|windows 7/ig)) {  
    26.   
  
  
  
  26.         systemVs = "7";  
    27.   
  
  
  
  27.     } else if (testUa(/windows nt 6.2|windows 8/ig)) {  
    28.   
  
  
  
  28.         systemVs = "8";  
    29.   
  
  
  
  29.     } else if (testUa(/windows nt 6.3|windows 8.1/ig)) {  
    30.   
  
  
  
  30.         systemVs = "8.1";  
    31.   
  
  
  
  31.     } else if (testUa(/windows nt 10.0|windows 10/ig)) {  
    32.   
  
  
  
  32.         systemVs = "10";  
    33.   
  
  
  
  33.     }  
    34.   
  
  
  
  34. } else if (system === "macos") {  
    35.   
  
  
  
  35.     systemVs = testVs(/os x [\d._]+/ig);  
    36.   
  
  
  
  36. } else if (system === "android") {  
    37.   
  
  
  
  37.     systemVs = testVs(/android [\d._]+/ig);  
    38.   
  
  
  
  38. } else if (system === "ios") {  
    39.   
  
  
  
  39.     systemVs = testVs(/os [\d._]+/ig);  
    40.   
  
  
  
  40. } 
    41.

平台

 
 
 
 
    
  
  
  
  
  1. let platform = "unknow";  
    2.   
  
  
  
  2. if (system === "windows" || system === "macos" || system === "linux") {  
    3.   
  
  
  
  3.     platform = "desktop"; // 桌面端  
    4.   
  
  
  
  4. } else if (system === "android" || system === "ios" || testUa(/mobile/ig)) {  
    5.   
  
  
  
  5.     platform = "mobile"; // 移动端  
    6.   
  
  
  
  6. } 
    7.

内核+载体

 
 
 
 
    
  
  
  
  
  1. let engine = "unknow";  
    2.   
  
  
  
  2. let supporter = "unknow";  
    3.   
  
  
  
  3. if (testUa(/applewebkit/ig) && testUa(/safari/ig)) {  
    4.   
  
  
  
  4.     engine = "webkit"; // webkit内核  
    5.   
  
  
  
  5.     if (testUa(/edge/ig)) {  
    6.   
  
  
  
  6.         supporter = "edge"; // edge浏览器  
    7.   
  
  
  
  7.     } else if (testUa(/opr/ig)) { 
    8.   
  
  
  
  8.          supporter = "opera"; // opera浏览器  
    9.   
  
  
  
  9.     } else if (testUa(/chrome/ig)) {  
    10.   
  
  
  
  10.         supporter = "chrome"; // chrome浏览器  
    11.   
  
  
  
  11.     } else {  
    12.   
  
  
  
  12.         supporter = "safari"; // safari浏览器  
    13.   
  
  
  
  13.     }  
    14.   
  
  
  
  14. } else if (testUa(/gecko/ig) && testUa(/firefox/ig)) {  
    15.   
  
  
  
  15.     engine = "gecko"; // gecko内核  
    16.   
  
  
  
  16.     supporter = "firefox"; // firefox浏览器  
    17.   
  
  
  
  17. } else if (testUa(/presto/ig)) {  
    18.   
  
  
  
  18.     engine = "presto"; // presto内核  
    19.   
  
  
  
  19.     supporter = "opera"; // opera浏览器  
    20.   
  
  
  
  20. } else if (testUa(/trident|compatible|msie/ig)) {  
    21.   
  
  
  
  21.     engine = "trident"; // trident内核  
    22.   
  
  
  
  22.     supporter = "iexplore"; // iexplore浏览器  
    23.   
  
  
  
  23. } 
    24.

内核版本+载体版本

 
 
 
 
    
  
  
  
  
  1. // 内核版本  
    2.   
  
  
  
  2. let engineVs = "unknow";  
    3.   
  
  
  
  3. if (engine === "webkit") {  
    4.   
  
  
  
  4.     engineVs = testVs(/applewebkit\/[\d.]+/ig);  
    5.   
  
  
  
  5. } else if (engine === "gecko") {  
    6.   
  
  
  
  6.     engineVs = testVs(/gecko\/[\d.]+/ig);  
    7.   
  
  
  
  7. } else if (engine === "presto") {  
    8.   
  
  
  
  8.     engineVs = testVs(/presto\/[\d.]+/ig);  
    9.   
  
  
  
  9. } else if (engine === "trident") {  
    10.   
  
  
  
  10.     engineVs = testVs(/trident\/[\d.]+/ig);  
    11.   
  
  
  
  11. }  
    12.   
  
  
  
  12. // 载体版本  
    13.   
  
  
  
  13. let supporterVs = "unknow";  
    14.   
  
  
  
  14. if (supporter === "chrome") {  
    15.   
  
  
  
  15.     supporterVs = testVs(/chrome\/[\d.]+/ig);  
    16.   
  
  
  
  16. } else if (supporter === "safari") {  
    17.   
  
  
  
  17.     supporterVs = testVs(/version\/[\d.]+/ig);  
    18.   
  
  
  
  18. } else if (supporter === "firefox") {  
    19.   
  
  
  
  19.     supporterVs = testVs(/firefox\/[\d.]+/ig);  
    20.   
  
  
  
  20. } else if (supporter === "opera") {  
    21.   
  
  
  
  21.     supporterVs = testVs(/opr\/[\d.]+/ig);  
    22.   
  
  
  
  22. } else if (supporter === "iexplore") {  
    23.   
  
  
  
  23.     supporterVs = testVs(/(msie [\d.]+)|(rv:[\d.]+)/ig);  
    24.   
  
  
  
  24. } else if (supporter === "edge") {  
    25.   
  
  
  
  25.     supporterVs = testVs(/edge\/[\d.]+/ig);  
    26.   
  
  
  
  26. } 
    27.

外壳+外壳版本

 
 
 
 
    
  
  
  
  
  1. let shell = "none";  
    2.   
  
  
  
  2. let shellVs = "unknow";  
    3.   
  
  
  
  3. if (testUa(/micromessenger/ig)) {  
    4.   
  
  
  
  4.     shell = "wechat"; // 微信浏览器  
    5.   
  
  
  
  5.     shellVs = testVs(/micromessenger\/[\d.]+/ig);  
    6.   
  
  
  
  6. } else if (testUa(/qqbrowser/ig)) {  
    7.   
  
  
  
  7.     shell = "qq"; // QQ浏览器  
    8.   
  
  
  
  8.     shellVs = testVs(/qqbrowser\/[\d.]+/ig);  
    9.   
  
  
  
  9. } else if (testUa(/ubrowser/ig)) {  
    10.   
  
  
  
  10.     shell = "uc"; // UC浏览器  
    11.   
  
  
  
  11.     shellVs = testVs(/ubrowser\/[\d.]+/ig);  
    12.   
  
  
  
  12. } else if (testUa(/2345explorer/ig)) {  
    13.   
  
  
  
  13.     shell = "2345"; // 2345浏览器  
    14.   
  
  
  
  14.     shellVs = testVs(/2345explorer\/[\d.]+/ig);  
    15.   
  
  
  
  15. } else if (testUa(/metasr/ig)) {  
    16.   
  
  
  
  16.     shell = "sougou"; // 搜狗浏览器  
    17.   
  
  
  
  17. } else if (testUa(/lbbrowser/ig)) {  
    18.   
  
  
  
  18.     shell = "liebao"; // 猎豹浏览器  
    19.   
  
  
  
  19. } else if (testUa(/maxthon/ig)) {  
    20.   
  
  
  
  20.     shell = "maxthon"; // 遨游浏览器  
    21.   
  
  
  
  21.     shellVs = testVs(/maxthon\/[\d.]+/ig);  
    22.   
  
  
  
  22. } else if (testUa(/bidubrowser/ig)) {  
    23.   
  
  
  
  23.     shell = "baidu"; // 百度浏览器  
    24.   
  
  
  
  24.     shellVs = testVs(/bidubrowser [\d.]+/ig);  
    25.   
  
  
  
  25. } 
    26.

终极合体

根据以上的条件判断获得的变量如下，我们可以把它们合并成一个对象输出。这样就可以输出一个清晰的浏览器运行环境，后面想干嘛就干嘛了，多方便。

本文重点探究方案的可行性，没有过多考虑到代码的优化，所以条件判断使用得有些多，如果有什么方法能优化下代码，减少条件判断，可以在下方评论提个建议哟。

  •  system：系统
  •  systemVs：系统版本
  •  platform：平台
  •  engine：内核
  •  engineVs：内核版本
  •  supporter：载体
  •  supporterVs：载体版本
  •  shell：外壳
  •  shellVs：外壳版本 
 
 
 
 
    
  
  
  
  
  1. function BrowserType() {  
    2.   
  
  
  
  2.     const ua = navigator.userAgent.toLowerCase();  
    3.   
  
  
  
  3.     const testUa = regexp => regexp.test(ua);  
    4.   
  
  
  
  4.     const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");  
    5.   
  
  
  
  5.     // 接上以上if...else条件判断  
    6.   
  
  
  
  6.     // ......  
    7.   
  
  
  
  7.     // 获取到system、systemVs、platform、engine、engineVs、supporter、supporterVs、shell、shellVs  
    8.   
  
  
  
  8.     return Object.assign({  
    9.   
  
  
  
  9.         engine, // webkit gecko presto trident  
    10.   
  
  
  
  10.         engineVs,  
    11.   
  
  
  
  11.         platform, // desktop mobile  
    12.   
  
  
  
  12.         supporter, // chrome safari firefox opera iexplore edge  
    13.   
  
  
  
  13.         supporterVs,  
    14.   
  
  
  
  14.         system, // windows macos linux android ios  
    15.   
  
  
  
  15.         systemVs  
    16.   
  
  
  
  16.     }, shell === "none" ? {} : {  
    17.   
  
  
  
  17.         shell, // wechat qq uc 2345 sougou liebao maxthon baidu  
    18.   
  
  
  
  18.         shellVs  
    19.   
  
  
  
  19.     });  
    20.   
  
  
  
  20. } 
    21.

在控制台执行BrowserType()，该有的都出来了，哈哈！源码详情请戳这里，喜欢的可以点个赞支持下，谢谢。

结语

写到最后总结得差不多了，后续如果我想起还有哪些判断浏览器运行环境终极方案遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。

网页标题：详细判断浏览器运行环境，值得一看
文章来源：http://www.shufengxianlan.com/qtweb/news25/54275.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

域名注册知识

各行业网站

成都茶叶销售　　 　成都营销型网站建设　　 　攀枝花网站建设　　 　混凝土密封固化剂　　 　护栏钻孔机　　 　成都seo优化　　 　网络推广平台　　 　大足网站建设　　 　营销型网站建设　　 　雅安网站建设　　 　网上商城开发　　 　虚拟主机购买　　 　广告媒介投放　　 　成都西信机房　　 　java虚拟主机　　 　犀浦门窗定制　　 　重庆教育培训网站建设　　 　分类目录网站　　 　贵州义龙电信机房　　 　成都响应式网站建设公司