JavaScript如何检测设备特性？

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，而应组合多个轻量特征：

标签： css javascript java android windows 浏览器 edge 安卓 iphone 显示器 w