Device Detector

一个纯 JavaScript/TypeScript 的网页端设备信息检测插件，不依赖任何前端框架运行时，可在 Vue / React / Angular / 原生 HTML/JS 中直接使用。

GitHub 仓库 About 建议

• Description：Device detector for web (ESM/CJS/UMD) with TypeScript types
• Website：README 或 Demo 地址（例如 GitHub Pages / Vercel 预览）
• Topics：device-detector、user-agent、browser-detection、os-detection、typescript、umd、vite

功能特点

• 设备信息检测：操作系统、设备类型、浏览器、屏幕信息、网络在线状态
• 通用模块产物：ESM / CommonJS / UMD（支持 <script> 直接引入）
• 全局统一入口：window.DeviceDetector
• 支持配置检测规则与事件监听（可选）
• TypeScript 类型声明

本仓库仍保留了旧版 getDeviceInfo()（legacy）API，便于平滑迁移。

安装

npm install @h2orange/device-detector

使用方法

ESM / CommonJS（任何框架均可）

import { DeviceDetector, createDetector } from '@h2orange/device-detector'

const info = DeviceDetector.getInfo()
console.log(info)

const detector = createDetector({
  listen: true
})

detector.on('deviceChanged', (next) => {
  console.log('device changed', next)
})

<script> 直接引入（UMD）

<script src="https://cdn.jsdelivr.net/npm/@h2orange/device-detector/dist/device-detector.umd.min.js"></script>
<script>
  const DeviceDetector = window.DeviceDetector
  const info = DeviceDetector.getInfo()
  console.log(info)
  const detector = DeviceDetector.init({ listen: true })
  detector.on('deviceChanged', (next) => console.log(next))
</script>

React / Vue / Angular 的使用方式

核心原则是：把它当作“普通 JS 库”使用即可，不需要框架适配层。

设备信息对象

getInfo() / detect() 返回结构化对象：

{
  os: { name: 'iOS', version: '16.5' },
  device: { type: 'mobile', model: 'iPhone' },
  browser: { name: 'Safari', version: '16.5' },
  screen: { width: 1170, height: 2532, pixelRatio: 3 },
  network: { online: true, type: 'wifi' },
  ua: '...',
  userAgent: '...',
  platform: '...'
}

使用示例

判断设备类型 / 系统 / 浏览器

const info = DeviceDetector.getInfo()
if (info.device.type === 'mobile') {}
if (info.os.name === 'iOS') {}
if (info.browser.name === 'Safari') {}

兼容性

• 支持浏览器：Chrome / Firefox / Safari / Edge（不依赖框架）
• 网络类型字段：navigator.connection 在部分浏览器不可用，插件会回退到 unknown

许可证

MIT