JavaScript检测设备类型应基于交互环境特征而非UA字符串，优先用window.matchMedia判断视口与输入特性，再结合touchstart/pointerdown动态识别输入方式，最后依据上下文实施响应式交互策略。
JavaScript 检测设备类型不是靠“识别手机还是电脑”，而是通过特征判断用户当前的交互环境，再据此调整行为。核心思路是：优先用 CSS 媒体查询做布局响应，JS 仅在需要主动干预时（比如触摸事件绑定、性能降级、特定功能开关）才介入检测。
用 window.matchMedia 判断视口特征（推荐）
这是最可靠、可监听、语义清晰的方式，不依赖 UA 字符串，也不猜测设备型号。
- 检测是否为小屏幕（常用于移动端逻辑）：
<script>
const isMobile = window.matchMedia('(max-width: 767px)').matches;
if (isMobile) { /* 绑定 touchstart、隐藏非必要动画等 */ }
</script> - 监听变化，实现动态响应：
<script>
const mediaQuery = window.matchMedia('(hover: hover) and (pointer: fine)');
mediaQuery.addEventListener('change', e => {
if (e.matches) { /* 鼠标可用，显示 tooltip 或 hover 效果 */ }
else { /* 触摸优先，改用 tap/click + 显式展开 */ }
});
</script>
区分触控与鼠标输入（比“手机/PC”更有意义）
用户真正关心的是“怎么操作”，而不是设备型号。现代笔记本带触屏、安卓平板接键盘，UA 已不可靠。
- 检查是否支持触摸事件：
'ontouchstart' in window || navigator.maxTouchPoints > 0 - 更稳妥的做法是监听一次
touchstart或pointerdown后标记为触控模式，避免误判： - 示例：
<script>
let inputType = 'mouse';
document.addEventListener('touchstart', () => { inputType = 'touch'; }, { once: true });
document.addEventListener('pointerdown', e => {
if (e.pointerType === 'touch') inputType = 'touch';
});
</script>
谨慎使用 navigator.userAgent
UA 字符串易伪造、语义模糊、维护成本高，仅在极少数后端需预加载不同资源时作为辅助参考。
立即学习“Java免费学习笔记（深入）”；
- 简单粗筛（不推荐用于核心逻辑）：
/(iPhone|iPad|iPod|Android)/i.test(navigator.userAgent) - 注意：Windows 10/11 的 Edge、Chrome 在平板模式下 UA 也可能含
Android或iPad；微信内置浏览器 UA 会伪装 iOS；部分安卓浏览器 UA 不含Android。 - 如果必须用，建议只作 fallback，且配合
window.screen或matchMedia二次验证。
响应式交互的关键不在“检测”，而在“适配策略”
检测只是起点，重点是根据上下文做合理决策：
- 小屏幕 + 触控 → 禁用 hover 动画，增大点击区域，用 swipe 替代 drag
- 大屏幕 + 鼠标 → 支持悬停菜单、右键上下文、滚轮缩放
- 低分辨率或低性能设备（可用
window.devicePixelRatio < 2或navigator.hardwareConcurrency <= 2辅助判断）→ 关闭复杂动效、降级 canvas 渲染 - 始终提供 keyboard 可访问性（
Enter/Space触发按钮），不依赖检测结果排除某类用户
