js 如何判断浏览器
2021-08-09 22:26:04
在 JavaScript 中判断浏览器类型，可通过 navigator 对象、window 对象 或 第三方库 实现，以下是具体方法及示例：
一、使用 navigator 对象navigator 对象提供浏览器信息，常用属性包括：
- navigator.userAgent：字符串，包含浏览器名称、版本、引擎及操作系统信息。
- navigator.vendor：返回浏览器供应商（如 Chrome 返回 "Google Inc."）。
- navigator.appVersion：返回浏览器版本信息（含名称、版本等）。
示例代码：
const userAgent = navigator.userAgent;if (userAgent.includes('Chrome')) { console.log('用户正在使用 Chrome 浏览器');} else if (userAgent.includes('Firefox')) { console.log('用户正在使用 Firefox 浏览器');} else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) { console.log('用户正在使用 Safari 浏览器');} else if (userAgent.includes('Edge')) { console.log('用户正在使用 Edge 浏览器');} else if (userAgent.includes('Opera') || userAgent.includes('OPR')) { console.log('用户正在使用 Opera 浏览器');} else { console.log('无法识别的浏览器');}说明：
- Safari 需排除 Chrome（因 Chrome 的 userAgent 也包含 Safari）。
- Edge 和 Opera 的 userAgent 包含特定标识（如 Edg 或 OPR）。
window.navigator 与直接使用 navigator 效果相同，例如：
const vendor = window.navigator.vendor;if (vendor === 'Google Inc.') { console.log('用户正在使用 Chrome 或基于 Chromium 的浏览器');} else if (vendor === 'Apple Computer, Inc.') { console.log('用户正在使用 Safari 浏览器');}说明：
- vendor 仅返回供应商信息，需结合其他属性（如 userAgent）提高准确性。
若需更精确的判断或兼容性处理，可使用第三方库：
Browserslist：用于配置目标浏览器范围，常与构建工具（如 Webpack、Babel）集成。
安装：npm install browserslist
示例：const browserslist = require('browserslist');const browsers = browserslist('> 0.5%, last 2 versions, not dead');console.log(browsers); // 返回支持的浏览器列表
WhatBrowser：轻量级库，直接返回浏览器信息。
安装：npm install whatbrowser
示例：const WhatBrowser = require('whatbrowser');const browser = new WhatBrowser();console.log(browser.name); // 返回浏览器名称（如 'Chrome'）console.log(browser.version); // 返回版本号
userAgent 的局限性：
用户或浏览器可能修改 userAgent，导致误判。
移动端浏览器（如 Chrome for Android）的 userAgent 可能与桌面端不同。
推荐实践：
优先检测功能：而非浏览器类型。例如，通过 'geolocation' in navigator 检测是否支持地理定位。
渐进增强：为所有浏览器提供基础功能，再为支持高级特性的浏览器增强体验。
现代替代方案：
使用 Feature Detection（特性检测）库（如 Modernizr）判断浏览器是否支持某功能。
遵循 W3C 标准，减少对特定浏览器的依赖。
- 简单场景：使用 navigator.userAgent 或 navigator.vendor 快速判断。
- 复杂需求：集成 Browserslist 或 WhatBrowser 库。
- 最佳实践：结合特性检测与渐进增强策略，避免过度依赖浏览器类型判断。
热门标签
