- 当前位置：首页 >应用开发 >详细判断浏览器运行环境，值得一看
详细判断浏览器运行环境，值得一看
发布时间：2025-11-05 05:36:37 来源：创站工坊 作者：域名
前言
看到标题，值得一看大家就能想起这个需求在很多项目上都能用到。详细行环我们部署在Web服务器上的判断前端应用，既可以用PC浏览器访问，浏览也可以用手机浏览器访问，器运再加上现在智能设备的值得一看推广，我们甚至能在车载系统、详细行环穿戴设备和电视平台上访问。判断
设备的浏览多样化让用户无处不在，有时候我们需要根据不同的器运浏览器运行环境做出对应的处理。浏览器是值得一看JavaScript的承载体，我们可以从浏览器上获取相关的详细行环信息，来进一步处理我们的判断业务逻辑。
然而浏览器品牌众多，浏览有些浏览器使用的器运标准也不太一样，造就了难以统一的判断。下面我大概罗列一下常用的浏览器品牌和在什么情况下使用浏览器运行环境判断。浏览器相关统计数据可以参考这里。
国际五大浏览器品牌：按照全球使用率降序排列
Google Chrome：Windows、MacOS、Linux、Android、b2b供应网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获取相关浏览器信息(如下)，再通过系统、平台、内核、载体、外壳的特有字段进行归类统一，整理出一个完整的浏览器运行环境。
const ua = navigator.userAgent.toLowerCase(); // 输出 "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"浏览器信息：权重按照以下降序排列
浏览器系统：所运行的操作系统，包含Windows、MacOS、Linux、Android、iOS 浏览器平台：所运行的设备平台，包含Desktop桌面端、Mobile移动端 浏览器内核：浏览器渲染引擎，包含Webkit、Gecko、Presto、Trident 浏览器载体：五大浏览器品牌，包含Chrome、Safari、Firefox、Opera、Iexplore/Edge 浏览器外壳：基于五大浏览器品牌的内核进行开发，再套一层自研技术的外壳，如国内众多浏览器品牌获取UserAgent是否包含字段：判断是否包含系统、平台、内核、载体、外壳的特有字段
const testUa = regexp => regexp.test(ua);获取UserAgent对应字段的版本
const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");方案
上述准备工作完成后，我们就按照权重(<font color="#f66">系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本</font>)根据系统、平台、内核、载体、外壳的特有字段来归类统一浏览器运行环境。
系统+系统版本
// 系统 let system = "unknown"; if (testUa(/windows|win32|win64|wow32|wow64/ig)) { system = "windows"; // window系统 } else if (testUa(/macintosh|macintel/ig)) { system = "macos"; // macos系统 } else if (testUa(/x11/ig)) { system = "linux"; // linux系统 } else if (testUa(/android|adr/ig)) { system = "android"; // android系统 } else if (testUa(/ios|iphone|ipad|ipod|iwatch/ig)) { system = "ios"; // ios系统 } // 系统版本 let systemVs = "unknown"; if (system === "windows") { if (testUa(/windows nt 5.0|windows 2000/ig)) { systemVs = "2000"; } else if (testUa(/windows nt 5.1|windows xp/ig)) { systemVs = "xp"; } else if (testUa(/windows nt 5.2|windows 2003/ig)) { systemVs = "2003"; } else if (testUa(/windows nt 6.0|windows vista/ig)) { systemVs = "vista"; } else if (testUa(/windows nt 6.1|windows 7/ig)) { systemVs = "7"; } else if (testUa(/windows nt 6.2|windows 8/ig)) { systemVs = "8"; } else if (testUa(/windows nt 6.3|windows 8.1/ig)) { systemVs = "8.1"; } else if (testUa(/windows nt 10.0|windows 10/ig)) { systemVs = "10"; } } else if (system === "macos") { systemVs = testVs(/os x [d._]+/ig); } else if (system === "android") { systemVs = testVs(/android [d._]+/ig); } else if (system === "ios") { systemVs = testVs(/os [d._]+/ig); }平台
let platform = "unknow"; if (system === "windows" || system === "macos" || system === "linux") { platform = "desktop"; // 桌面端 } else if (system === "android" || system === "ios" || testUa(/mobile/ig)) { platform = "mobile"; // 移动端 }内核+载体
let engine = "unknow"; let supporter = "unknow"; if (testUa(/applewebkit/ig) && testUa(/safari/ig)) { engine = "webkit"; // webkit内核 if (testUa(/edge/ig)) { supporter = "edge"; // edge浏览器 } else if (testUa(/opr/ig)) { supporter = "opera"; // opera浏览器 } else if (testUa(/chrome/ig)) { supporter = "chrome"; // chrome浏览器 } else { supporter = "safari"; // safari浏览器 } } else if (testUa(/gecko/ig) && testUa(/firefox/ig)) { engine = "gecko"; // gecko内核 supporter = "firefox"; // firefox浏览器 } else if (testUa(/presto/ig)) { engine = "presto"; // presto内核 supporter = "opera"; // opera浏览器 } else if (testUa(/trident|compatible|msie/ig)) { engine = "trident"; // trident内核 supporter = "iexplore"; // iexplore浏览器 }内核版本+载体版本
// 内核版本 let engineVs = "unknow"; if (engine === "webkit") { engineVs = testVs(/applewebkit/[d.]+/ig); } else if (engine === "gecko") { engineVs = testVs(/gecko/[d.]+/ig); } else if (engine === "presto") { engineVs = testVs(/presto/[d.]+/ig); } else if (engine === "trident") { engineVs = testVs(/trident/[d.]+/ig); } // 载体版本 let supporterVs = "unknow"; if (supporter === "chrome") { supporterVs = testVs(/chrome/[d.]+/ig); } else if (supporter === "safari") { supporterVs = testVs(/version/[d.]+/ig); } else if (supporter === "firefox") { supporterVs = testVs(/firefox/[d.]+/ig); } else if (supporter === "opera") { supporterVs = testVs(/opr/[d.]+/ig); } else if (supporter === "iexplore") { supporterVs = testVs(/(msie [d.]+)|(rv:[d.]+)/ig); } else if (supporter === "edge") { supporterVs = testVs(/edge/[d.]+/ig); }外壳+外壳版本
let shell = "none"; let shellVs = "unknow"; if (testUa(/micromessenger/ig)) { shell = "wechat"; // 微信浏览器 shellVs = testVs(/micromessenger/[d.]+/ig); } else if (testUa(/qqbrowser/ig)) { shell = "qq"; // QQ浏览器 shellVs = testVs(/qqbrowser/[d.]+/ig); } else if (testUa(/ubrowser/ig)) { shell = "uc"; // UC浏览器 shellVs = testVs(/ubrowser/[d.]+/ig); } else if (testUa(/2345explorer/ig)) { shell = "2345"; // 2345浏览器 shellVs = testVs(/2345explorer/[d.]+/ig); } else if (testUa(/metasr/ig)) { shell = "sougou"; // 搜狗浏览器 } else if (testUa(/lbbrowser/ig)) { shell = "liebao"; // 猎豹浏览器 } else if (testUa(/maxthon/ig)) { shell = "maxthon"; // 遨游浏览器 shellVs = testVs(/maxthon/[d.]+/ig); } else if (testUa(/bidubrowser/ig)) { shell = "baidu"; // 百度浏览器 shellVs = testVs(/bidubrowser [d.]+/ig); }终极合体
根据以上的条件判断获得的变量如下，我们可以把它们合并成一个对象输出。这样就可以输出一个清晰的浏览器运行环境，后面想干嘛就干嘛了，多方便。
本文重点探究方案的可行性，没有过多考虑到代码的优化，所以条件判断使用得有些多，如果有什么方法能优化下代码，减少条件判断，可以在下方评论提个建议哟。
system：系统 systemVs：系统版本 platform：平台 engine：内核 engineVs：内核版本 supporter：载体 supporterVs：载体版本 shell：外壳 shellVs：外壳版本 function BrowserType() { const ua = navigator.userAgent.toLowerCase(); const testUa = regexp => regexp.test(ua); const testVs = regexp => (ua.match(regexp) + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); // 接上以上if...else条件判断 // ...... // 获取到system、systemVs、platform、engine、engineVs、supporter、supporterVs、shell、shellVs return Object.assign({ engine, // webkit gecko presto trident engineVs, platform, // desktop mobile supporter, // chrome safari firefox opera iexplore edge supporterVs, system, // windows macos linux android ios systemVs }, shell === "none" ? {} : { shell, // wechat qq uc 2345 sougou liebao maxthon baidu shellVs }); }在控制台执行BrowserType()，该有的都出来了，哈哈！源码详情请戳这里，喜欢的可以点个赞支持下，谢谢。
结语
写到最后总结得差不多了，后续如果我想起还有哪些判断浏览器运行环境终极方案遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。
- 电脑显示程序出现未知错误，如何解决？（故障排除与解决方案）
- 使用U盘安装Windows7系统的完整教程（教你如何利用U盘轻松安装Windows7操作系统）
- Oppo8007（体验智能科技的巅峰之作）
- 飞利浦227e6qsd电脑显示器综合评测（探索其画质、色彩表现和功能特点）
- 电脑系统错误修复失败的原因及解决方法（探索系统错误修复失败的常见原因和有效解决方案）
- CPU散热器方向装反的影响及解决方法（错误安装CPU散热器可能导致的问题与应对策略）
- 索尼RX100一代（拍摄世界的细节，尽在掌握之中）
- OPPOR9sK歌怎么样？手机音质与用户体验的综合评估
- 飞利浦SHB6250音质的真实评价（揭秘SHB6250的音质表现，解锁你的音乐世界）
- 方太JQ08TS燃气灶的卓越性能与便捷操作（高品质设计与智能功能，让您的烹饪体验更加出色）
- 电脑主机箱DIY（让你的电脑更加便携，打造独一无二的主机箱）
- 使用U盘重装Win7系统教程（详细步骤图文指导，让你轻松重装Win7系统）
- OPPOA59s体验报告（了解OPPOA59s的性能和用户体验）
- IBMx3650M5（深度解析IBMx3650M5服务器的卓越性能和可靠质量）
- 显卡安装软件教程（以NVIDIA显卡为例，详解显卡安装软件步骤，让电脑性能提升更简单）
- 索尼XB650BT无线耳机（体验纯粹音乐的极致享受）
- HP高仿硒鼓消耗量分析（减少成本、提高效率的关键）
- 手机视频录制文件格式的选择及优化（探索最佳手机视频录制文件格式，优化录制效果）
- 深入了解live2d电脑教程（学习live2d电脑教程的关键技巧与方法）
- 长虹49U3C电视（领先技术打造沉浸式家庭娱乐，以及一键操作带来的便捷生活）
随便看看
源码库益华科技IT技术网服务器租用亿华云IT资讯网企商汇源码下载香港云服务器亿华云计算益华IT技术论坛益强编程堂汇智坊多维IT资讯亿华智慧云益华科技码力社益强科技益强IT技术网云智核码上建站运维纵横编程之道亿华灵动益强数据堂IT资讯网极客码头亿华智造思维库极客编程亿华科技全栈开发益强编程舍亿华云益强智囊团亿华互联技术快报益强资讯优选益华科技智能时代云站无忧益强前沿资讯益强科技
- Copyright © 2025 Powered by 详细判断浏览器运行环境，值得一看,创站工坊 滇ICP备2023006006号-44sitemap