如何通过 navigator.maxTouchPoints 准确判定设备交互能力自动降级 UI-js教程-PHP中文网

navigator.maxtouchpoints > 0 不应直接切 touch-mode，它仅表示硬件多点触控能力而非用户当前操作意图；应优先用 matchmedia('(hover: none) and (pointer: coarse)') 判断实时交互意图，并分层兜底。

如何通过 navigator.maxtouchpoints 准确判定设备交互能力自动降级 ui

navigator.maxTouchPoints > 0 就该切 touch-mode？别急，先看它到底代表什么

navigator.maxTouchPoints 是浏览器从系统底层读取的并发触摸点数，不是“是不是手机”的开关，而是“硬件是否报告了多点触控能力”。它的典型值是 0（无报告）、1（单点，如部分 Windows 笔电）、5 或 10（主流手机/平板）。但要注意：

它不随用户当前输入方式变化：Surface 插着键盘用鼠标时，navigator.maxTouchPoints 仍可能为 5
它在旧版 Safari（iOS ≤ 13.3）中是 undefined，Chrome 84+、Firefox 65+、Edge 79+ 支持稳定
值为 0 不等于“没触摸屏”，可能是驱动未暴露、企业策略屏蔽、或远程桌面环境

所以直接写 if (navigator.maxTouchPoints > 0) { enableTouchUI() } 会把大量桌面触控设备强制塞进大按钮、禁 hover 的体验里，反而损害可用性。

真正该响应的是“用户此刻倾向怎么操作”，不是“设备有没有触摸屏”

交互意图比硬件能力更重要。一个 Surface 用户正用鼠标点选表格，你却因为 navigator.maxTouchPoints > 0 把所有 hover 下拉菜单干掉了，这就是本末倒置。

推荐组合判断：

window.matchMedia('(hover: none) and (pointer: coarse)')：同时满足「无悬停能力」+「粗粒度指针」，基本可认定用户正用手指操作
监听 change 事件，支持运行时切换（比如用户拔掉键盘、切回触控模式）
回退逻辑必须存在："ontouchstart" in window 兼容性更好，但注意某些 polyfill 会污染这个判断

示例逻辑：

const mql = window.matchMedia('(hover: none) and (pointer: coarse)');
function updateInteractionMode() {
  const isTouchIntent = mql.matches;
  document.body.classList.toggle('touch-mode', isTouchIntent);
  // 仅在此刻禁用 hover 动画、移除 mouseenter 监听器等
}
mql.addEventListener('change', updateInteractionMode);
updateInteractionMode();