2020年使用JavaScript检测触摸设备和检测“可悬停”状态

Question

简短版

如何使用原生JavaScript检查用户是否在触摸设备上或者能够悬停？

---

详细版

这篇文章提出了很多种解决方法，但是现在已经是2020年了，浏览器和设备发生了很多变化，因此我认为应该重新提出一个问题。许多答案并没有考虑到所有的边角情况：

• 例如触控笔。
• 例如苹果的魔术鼠标，它（显然）模拟了触摸事件（我听说过，但我自己没有体验过）。
• 例如新的iPad Pro，它模拟了Macbook Pro上的Safari。
• 例如能力发生变化，用户获得/失去“触摸”的能力（例如使用Chrome开发者工具启用移动视图时）。

---

我的发现

不要使用window.matchMedia('(any-pointer: XXXXX)').matches

有些答案建议使用“新奇”的window.matchMedia和any-pointer: coarse|none|fine。然而，我很幸运拥有一台OnePlus 5t手机。因为这种匹配媒体在我的设备上的Firefox和Chrome中都无法工作（false matching）。我进行了大量尝试，因为我希望拥有相同的CSS检查，以便我的JavaScript和CSS相互对应，确保样式和功能匹配。

不要使用userAgent匹配

这不是一个好主意，因为它需要维护userAgent列表，每次新浏览器发布时都需要更新。因此，这种方法不具有未来性。就像之前提到的iPad Pro例子。

不要使用人类触摸

这篇Code Burst文章建议使用人类的触摸而不是检测设备的触摸。这可能是解决方案的一部分。但如果我有一个面向触摸用户的菜单，那么我必须立即显示它，而不是等待用户触摸屏幕才显示。

- Zeth

Answer 1

我创建了一个CodePen，在其中设置好了添加新功能和轻松测试的环境。 同时还展示了目前我所发现的最佳解决方案：https://codepen.io/zethzeth/pen/yLewqbg

关于stylus或其他奇怪情况，我不确定该怎么做。

这是函数：

function is_touch_device4(){
  return window.matchMedia('(hover: none)').matches;
}

- Zeth

---

人们应该更经常地在 Stack Overflow 上以问答的形式发布他们的发现。 - Gust van de Wal