
JavaScript检测设备特性主要依靠浏览器提供的API和环境信息,核心思路是“用特征探测代替用户代理判断”,避免依赖不可靠的navigator.userAgent字符串。
检测触摸支持(是否为触屏设备)
最可靠的方式是检查'ontouchstart' in window或navigator.maxTouchPoints > 0,而非判断iPhone、Android等关键词。
-
'ontouchstart' in window:兼容性好,适用于大多数现代浏览器(包括桌面端开启触摸的Windows设备) -
!!navigator.maxTouchPoints:更语义化,但IE不支持,Chrome/Firefox/Edge支持 - 注意:不要用
matchMedia('(hover: none) and (pointer: coarse)')单独判断,它反映的是输入倾向,不是硬件能力
识别设备像素比与屏幕密度
通过window.devicePixelRatio获取物理像素与CSS像素的缩放比例,常用于适配高清屏图像或Canvas渲染。
- 值为1:标准密度屏幕(如多数PC显示器)
- 值为2或3:Retina屏、高端安卓机等(如iPhone 14 Pro为3)
- 可结合
window.matchMedia监听变化:window.matchMedia('(resolution: 2dppx)').matches
判断是否在移动浏览器中运行
不推荐解析UserAgent,而应组合多个轻量特征:
立即学习“Java免费学习笔记(深入)”;
- 检查是否支持触摸事件 + 屏幕宽度较小(如
screen.width ) - 检测
navigator.standalone(iOS PWA全屏模式) - 用
matchMedia('(display-mode: standalone)')识别PWA安装态 - 避免使用
navigator.userAgent.includes('Mobile')——部分桌面浏览器会伪造该字段
获取设备方向与运动能力
利用DeviceOrientation API判断设备是否支持陀螺仪或加速度计:
-
typeof DeviceOrientationEvent !== 'undefined'表示支持方向事件 -
typeof DeviceMotionEvent !== 'undefined'表示支持运动事件 - 需用户授权后才能触发(现代浏览器要求安全上下文+用户交互后启用)
- 可用
window.addEventListener('orientationchange', ...)监听横竖屏切换(仅iOS/Safari稳定)
特征检测的关键是分层验证:先查是否存在API,再试运行是否成功,最后根据返回值做适配。这样既健壮又面向未来。










