在做前端页面时，判断用户当前使用的设备类型和浏览器信息是一项非常常见的需求。例如移动端访问时要跳转到专门的H5页面，某些老浏览器不支持新特性时需要降级处理，统计系统也需要按设备和浏览器维度分析访问数据。JavaScript提供了多个API来完成这类判断，本文围绕navigator对象展开，介绍几种常用的判断方法，并分析它们的优缺点和适用场景。
一、通过navigator.userAgent判断设备和浏览器
navigator.userAgent（简称UA）是判断设备类型最经典的方式。浏览器在发起请求时会带上一个UA字符串，其中包含了操作系统、浏览器内核、版本号等信息。在JavaScript中可以直接读取这个字符串并做正则匹配。
下面是一段常见的判断代码：
var ua = navigator.userAgent;
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
var isAndroid = ua.indexOf('Android') > -1;
var isIOS = /iPad|iPhone|iPod/.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
var isWeChat = /MicroMessenger/i.test(ua);
if (isMobile) {
console.log('当前是移动端设备');
} else {
console.log('当前是PC端设备');
}需要注意的是，iPad从较新版本的iPadOS开始，其默认UA会伪装成Mac Safari，导致传统的iPhone、iPad正则匹配不到。上面代码中通过platform配合maxTouchPoints的判断就是为了解决这个坑：Mac电脑的触控点数量通常为0或1，而iPad支持多点触控，数值会明显更大。
UA方式的优点是简单直接、兼容性好，几乎所有浏览器都支持。缺点是UA字符串可以随意伪造，用户通过开发者工具或浏览器插件就能修改，因此不能把UA判断作为安全手段，只适合用于体验优化和统计分析这类非关键场景。
二、判断具体浏览器类型和版本
区分浏览器类型同样依赖UA字符串，但由于历史原因，各家浏览器的UA普遍存在“蹭标识”现象。比如Chrome的UA里含有Safari字样，Edge的UA里含有Chrome和Safari字样，所以匹配时必须按顺序判断，先识别特殊的再识别通用的。
function getBrowserInfo() {
var ua = navigator.userAgent;
var browser = 'Unknown';
var version = '';
var matchArr = [
{ name: 'Edge', reg: /Edge\/([\d.]+)/ },
{ name: 'Edg', reg: /Edg\/([\d.]+)/ }, // 新版Edge（Chromium内核）
{ name: 'QQ浏览器', reg: /QQBrowser\/([\d.]+)/ },
{ name: 'UC浏览器', reg: /UBrowser\/([\d.]+)/ },
{ name: 'Firefox', reg: /Firefox\/([\d.]+)/ },
{ name: 'Opera', reg: /OPR\/([\d.]+)/ },
{ name: 'Safari', reg: /Version\/([\d.]+).*Safari/ },
{ name: 'Chrome', reg: /Chrome\/([\d.]+)/ },
{ name: 'IE', reg: /(MSIE [\d.]+)|(rv:[\d.]+.*Trident)/ }
];
for (var i = 0; i < matchArr.length; i++) {
var m = ua.match(matchArr[i].reg);
if (m) {
browser = matchArr[i].name;
version = m[1] || '';
break;
}
}
return { browser: browser, version: version };
}
console.log(getBrowserInfo()); // 例如：{ browser: "Chrome", version: "120.0.0.0" }除了UA之外，还可以借助一些浏览器独有的对象属性来判断，例如window.ActiveXObject只在IE中存在，window.chrome在Chrome中存在。这种方式速度比正则快，但属性在不同版本中可能被移除，稳定性不如UA，建议只作为辅助手段。
另外一个值得提醒的点是IE11的UA格式与IE10之前完全不同，它不再包含MSIE字样，而是用Trident加rv的方式表示，所以判断IE时必须把两种格式都覆盖到，否则很容易漏掉IE11用户。
三、更可靠的方案：能力检测与窗口尺寸结合
UA判断本质上是字符串匹配，准确性和可维护性都有局限。更推荐的做法是能力检测（Feature Detection），即不关心用户用什么浏览器，只关心浏览器是否支持某个特性。例如判断是否支持触摸事件：
// 能力检测：是否支持触摸
var isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
// 结合屏幕尺寸判断是否为手机
function isPhone() {
var isMobileSize = window.innerWidth < 768;
return isTouchDevice && isMobileSize;
}
// 判断是否支持某些新特性
var supportsFlexGap = CSS.supports('gap', '10px');
var supportsFetch = typeof window.fetch === 'function';能力检测的可靠性远高于UA判断，因为无论用户如何修改UA，浏览器实际支持的特性是伪造不了的。在做功能降级决策时，应优先使用能力检测；只有遇到必须知道具体浏览器名称的场景（比如提示用户更换浏览器、数据统计），才退回到UA匹配。
此外，判断移动端还可以结合窗口宽度、设备像素比devicePixelRatio、navigator.platform等多个信号综合判断。需要注意区分“移动设备”和“小屏幕”这两个概念：移动设备上横屏时宽度可能超过768像素，PC浏览器缩小窗口后宽度也可能很小。如果是做响应式布局，直接用CSS媒体查询即可，不必用JavaScript判断。
四、常见应用场景与封装建议
实际项目中，建议把这些判断逻辑统一封装成一个工具模块，避免散落在各处难以维护。下面给出一个相对完整的封装示例：
var DeviceInfo = (function() {
var ua = navigator.userAgent;
return {
isMobile: /Android|iPhone|iPad|iPod|Mobile/i.test(ua),
isAndroid: /Android/i.test(ua),
isIOS: /iPhone|iPad|iPod/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
isWeChat: /MicroMessenger/i.test(ua),
isAlipay: /AlipayClient/i.test(ua),
isPC: !/Android|iPhone|iPad|iPod|Mobile/i.test(ua),
language: (navigator.language || navigator.browserLanguage || '').toLowerCase(),
platform: navigator.platform,
getBrowser: function() {
// 此处可复用上文 getBrowserInfo 的实现
return getBrowserInfo();
}
};
})();
// 使用示例：微信内打开时引导用户使用浏览器访问
if (DeviceInfo.isWeChat) {
alert('请点击右上角菜单，选择在浏览器中打开');
}封装时还要考虑判断结果可能需要动态更新，比如用户旋转屏幕或缩放窗口后，设备类型判断不应该固定不变，可以把相关属性改成函数形式，每次调用时实时计算。
最后总结一下选型原则：功能兼容性决策用能力检测，页面跳转和样式切换用UA加屏幕尺寸，数据统计用UA解析。三者结合使用，才能既保证准确性又保持代码的可维护性。同时提醒一点，随着浏览器版本迭代，UA格式可能变化，定期检查和更新正则规则是很有必要的。