通过navigator对象和User Agent解析可获取浏览器类型、版本、操作系统等信息，结合ua字符串与平台属性判断设备环境，建议辅以特性检测和Client Hints提升准确性。
要通过 JavaScript 获取浏览器信息，主要依赖 navigator 对象和 User Agent 字符串解析。虽然现代浏览器出于隐私保护限制了部分信息暴露，但依然可以通过一些方法获取基本的浏览器类型、版本、操作系统等信息。
1. 使用 navigator 对象获取基本信息
navigator 是浏览器内置的对象，包含大量关于用户代理的信息。以下是常用属性：
- navigator.userAgent：返回完整的 User Agent 字符串
- navigator.platform：返回操作系统平台（如 Win32、MacIntel）
- navigator.language：返回浏览器首选语言
- navigator.cookieEnabled：判断是否启用 Cookie
- navigator.onLine：判断网络是否在线
示例代码：
function getBasicBrowserInfo() {
return {
userAgent: navigator.userAgent,
platform: navigator.platform,
language: navigator.language,
cookieEnabled: navigator.cookieEnabled,
online: navigator.onLine
};
}
console.log(getBasicBrowserInfo());
2. 解析 User Agent 判断浏览器类型和版本
User Agent 字符串虽不推荐用于功能检测（建议使用特性检测），但在统计或兼容性处理中仍有用途。可通过正则匹配识别常见浏览器。
示例脚本：
function getBrowserDetails() {
const ua = navigator.userAgent;
let browser = 'Unknown';
let version = 'Unknown';
if (ua.match(/chrome\/\d+/i)) {
browser = 'Chrome';
version = ua.match(/chrome\/(\d+)/i)[1];
} else if (ua.match(/firefox\/\d+/i)) {
browser = 'Firefox';
version = ua.match(/firefox\/(\d+)/i)[1];
} else if (ua.match(/safari\/\d+/i) && !ua.match(/chrome/i)) {
browser = 'Safari';
version = ua.match(/version\/(\d+)/i)[1];
} else if (ua.match(/edg\/\d+/i)) {
browser = 'Edge';
version = ua.match(/edg\/(\d+)/i)[1];
} else if (ua.match(/trident\/.*rv:(\d+)/i)) {
browser = 'Internet Explorer';
version = ua.match(/trident\/.*rv:(\d+)/i)[1];
}
return { browser, version };
}
console.log(getBrowserDetails());
3. 获取操作系统信息
结合 navigator.platform 和 User Agent 可大致判断操作系统类型。
function getOSInfo() {
const platform = navigator.platform;
let os = 'Unknown';
if (/win/i.test(platform)) os = 'Windows';
else if (/mac/i.test(platform)) os = 'macOS';
else if (/linux/i.test(platform)) os = 'Linux';
else if (/android/i.test(navigator.userAgent)) os = 'Android';
else if (/iphone|ipad|ipod/i.test(navigator.userAgent)) os = 'iOS';
return { platform, os };
}
console.log(getOSInfo());
4. 注意事项与替代方案
现代浏览器逐步弱化 User Agent 精确性（如 Chrome 引入 UA-Client-Hints），因此建议：
- 避免用 UA 判断功能支持，改用 特性检测（如 'IntersectionObserver' in window）
- 若需精确设备信息，可考虑 UA-Client Hints API（需 HTTPS 环境）
- 注意隐私模式下部分信息可能被屏蔽
基本上就这些。通过组合使用 navigator 属性和字符串解析，可以满足大多数浏览器信息获取需求，但要保持代码健壮，需处理未知情况并持续更新匹配规则。
