设备探测

通过各种方式探测用户设备和浏览器信息,用于做兼容性处理和功能适配。

探测方法对比

方法 说明 优点 缺点
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;
← Device Overview Browser Detection →