设备探测
通过各种方式探测用户设备和浏览器信息,用于做兼容性处理和功能适配。
探测方法对比
| 方法 | 说明 | 优点 | 缺点 |
|---|---|---|---|
| User-Agent | 通过navigator.userAgent获取 | 简单易用,信息全面 | 可伪造,不准确 |
| navigator对象 | 获取平台、语言、在线状态等 | 官方API,可靠性高 | 信息有限 |
| Screen对象 | 获取屏幕尺寸、分辨率 | 准确反映屏幕信息 | 无法区分设备类型 |
| window.orientation | 判断设备方向 | 简单判断横竖屏 | 已废弃,推荐orientationchange |
| Touch事件支持 | 检测是否支持触摸 | 区分触屏和PC | 部分平板同时支持 |
设备探测示例
// 获取用户代理信息
const ua = navigator.userAgent;
// 判断是否为移动端
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
// 判断iOS设备
const isIOS = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua);
// 判断Android设备
const isAndroid = /Android/i.test(ua);
// 判断微信内置浏览器
const isWechat = /MicroMessenger/i.test(ua);
// 获取屏幕信息
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
const dpr = window.devicePixelRatio;
// 判断是否为Retina屏幕
const isRetina = dpr > 1;
// 检测触摸支持
const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;