navigator.maxtouchpoints 是判断设备触摸能力最语义清晰、兼容性好且被 mdn 推荐的方式，返回值大于 0 表示系统级支持多点触控，结合 matchmedia 可精准识别当前主交互方式。
直接用 navigator.maxTouchPoints 判断设备是否支持触摸，并据此切换交互逻辑，是目前最语义清晰、兼容性良好且被 MDN 推荐的方式。它不依赖易伪造的 UA 字符串，也不受事件监听时机或模拟环境干扰，重点反映硬件能力本身。
判断逻辑与基础用法
该属性返回一个非负整数，表示设备支持的最大并发触摸点数量。值为 0 表示当前环境（通常指桌面浏览器）未报告触摸能力；大于 0（如 iPad 返回 5，部分 Windows 触控本返回 10）则表明系统级支持多点触控。
-
可靠判断触摸能力：比
'ontouchstart' in window更稳定，后者在某些桌面 Chrome 模拟移动端时可能为true，但maxTouchPoints仍为 0 - 注意兼容范围：IE 不支持，但现代主流浏览器（Chrome/Firefox/Edge/Safari 11.1+）均已支持；Safari 在 iOS 13+ 和 macOS 10.15+ 中对 iPad 和 Mac 触控板行为有细化区分
- 不要单独用于“是否为移动设备”判定：带触控屏的 Windows 笔记本、二合一设备也会返回 >0，但它确实是“支持触摸”的准确信号
结合 matchMedia 做交互倾向识别
仅知道设备能触摸，还不够——用户此刻是用手指、触控笔，还是鼠标？window.matchMedia('(hover: none) and (pointer: coarse)') 可帮你推断当前主输入方式是否为粗粒度触摸（即手指）。
-
hover: none：主输入设备不支持悬停（鼠标/触控板支持，手指不支持） -
pointer: coarse：主指针精度低，典型为手指触摸；fine对应鼠标、触控笔 -
组合使用更合理：同时满足
maxTouchPoints > 0且媒体查询匹配，才说明“设备有触摸能力 + 用户当前正以手指为主交互”，适合启用大点击区域、禁用 hover 效果等
差异化交互的实际切换建议
检测结果不应只用于“开关式”适配，而要分层响应：
- UI 尺寸与间距：触摸操作需更大热区，按钮最小尺寸建议 ≥44×44px，行高、边距适当放大；鼠标环境可保留紧凑布局
-
手势替代 hover：在
hover: none环境中，避免依赖悬停展开菜单或 Tooltip，改用点击/长按触发 -
事件监听策略：优先监听
click（兼容所有设备），再根据maxTouchPoints > 0增补touchstart防止移动端 300ms 延迟；不建议仅监听touchstart而忽略click -
键盘与弹窗适配：触摸设备软键盘弹出频繁，弹窗高度应动态计算剩余可视区域（
window.innerHeight - keyboardHeight），而非固定百分比
简单可用的封装函数
以下函数兼顾准确性与实用性，可用于初始化阶段调用：
function getInteractionProfile() {
const hasTouch = "maxTouchPoints" in navigator && navigator.maxTouchPoints > 0;
const isCoarseHoverless = window.matchMedia?.('(hover: none) and (pointer: coarse)')?.matches;
<p>return {
isTouchCapable: hasTouch,
isPrimaryTouchUser: hasTouch && isCoarseHoverless,
interactionType: isCoarseHoverless ? 'touch' : hasTouch ? 'hybrid' : 'mouse'
};
}</p><p>// 使用示例
const profile = getInteractionProfile();
if (profile.isPrimaryTouchUser) {
enableLargeTapTargets();
disableHoverMenus();
} else if (profile.interactionType === 'hybrid') {
keepBothClickAndTouchHandlers();
}
</p>
