detectBrowser

检测浏览器、操作系统、设备的完整信息

前置依赖

依赖参数

参数名	类型	说明
deps.userAgent	Navigator['userAgent']	用户代理字符串
deps.innerWidth	number	窗口内宽（可选）
deps.innerHeight	number	窗口内高（可选）

函数签名

interface BrowserInfo {
  browser: {
    name: string
    version: string
    majorVersion: number
  }
  os: {
    name: string
    version: string
    platform: string
  }
  device: {
    type: 'mobile' | 'tablet' | 'desktop'
    vendor: string
    model: string
  }
  engine: {
    name: string
    version: string
  }
  screen: {
    width: number
    height: number
  }
  features: {
    isMobile: boolean
    isTablet: boolean
    isDesktop: boolean
    isTouchDevice: boolean
    isRetina: boolean
  }
}

function detectBrowser(deps: DetectBrowserDeps): BrowserInfo

参数

参数名	类型	必填	说明
deps	DetectBrowserDeps	是	环境依赖

返回值

类型	说明
BrowserInfo	完整的浏览器环境信息

BrowserInfo 详细说明

browser - 浏览器信息

• name: 浏览器名称（Chrome, Firefox, Safari, Edge, Opera等）
• version: 完整版本号（如 "120.0.6099.109"）
• majorVersion: 主版本号（如 120）

os - 操作系统信息

• name: 系统名称（Windows, macOS, Linux, iOS, Android等）
• version: 系统版本号
• platform: 平台标识（win32, darwin, linux, ios, android）

device - 设备信息

• type: 设备类型（mobile, tablet, desktop）
• vendor: 设备品牌（Apple, Microsoft, Android等）
• model: 设备型号

engine - 渲染引擎信息

• name: 引擎名称（Blink, WebKit, Gecko等）
• version: 引擎版本号

screen - 屏幕信息

• width: 窗口宽度（像素）
• height: 窗口高度（像素）

features - 特性标识

• isMobile: 是否为移动设备
• isTablet: 是否为平板设备
• isDesktop: 是否为桌面设备
• isTouchDevice: 是否支持触摸
• isRetina: 是否为高分辨率屏幕

工作原理

1. 解析User-Agent字符串识别浏览器类型和版本
2. 检测操作系统类型、版本和平台标识
3. 判断设备类型（移动/平板/桌面）和品牌型号
4. 识别渲染引擎（Blink/WebKit/Gecko）
5. 获取屏幕尺寸信息
6. 设置各种特性标识

支持检测的浏览器：Chrome, Edge, Firefox, Safari, Opera
支持检测的系统：Windows, macOS, Linux, iOS, Android

使用示例

基本用法

const info = detectBrowser({
  userAgent: navigator.userAgent,
  innerWidth: window.innerWidth,
  innerHeight: window.innerHeight
})

console.log(info.browser.name)  // 'Chrome'
console.log(info.os.name)       // 'macOS'
console.log(info.device.type)   // 'desktop'

响应式设计

const info = detectBrowser({
  userAgent: navigator.userAgent,
  innerWidth: window.innerWidth,
  innerHeight: window.innerHeight
})

if (info.features.isMobile) {
  // 加载移动端样式
} else if (info.features.isTablet) {
  // 加载平板样式
} else {
  // 加载桌面样式
}

浏览器兼容性

const info = detectBrowser({
  userAgent: navigator.userAgent
})

if (info.browser.name === 'Chrome' && info.browser.majorVersion >= 90) {
  // 使用现代Chrome特性
}

if (info.os.name === 'iOS' && parseFloat(info.os.version) < 14) {
  // iOS 14以下降级处理
}