JavaScript技巧：如何有效地检测触摸屏设备？

Question

我写了一个适用于桌面和移动设备的jQuery插件。我想知道是否有一种方法可以使用JavaScript来检测设备是否具有触摸屏功能。我正在使用jquery-mobile.js来检测触摸屏事件，并且它在iOS、Android等设备上都可以工作，但我还想根据用户的设备是否具有触摸屏编写条件语句。

这是可能的吗？

Answer 1

更新2021

要查看旧答案：请查看历史记录。我决定从零开始，因为在帖子中保留历史记录时变得难以控制。

我的原始答案说可以使用与Modernizr使用的相同函数，但现在已无效，因为他们在此PR中删除了“touchevents”测试：https://github.com/Modernizr/Modernizr/pull/2432，因为这是一个容易引起混淆的主题。

话虽如此，这应该是一种相当好的检测浏览器是否具有“触摸功能”的方法：

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}

但对于更高级的用例，比我聪明得多的人已经写过关于这个主题的文章，我建议阅读这些文章：

• Stu Cox: 无法检测触摸屏
• 检测触摸：关注“为什么”，而不是“如何”
• Patrick H. Lauke的触摸介绍

Answer 2

更新：在将整个特性检测库引入项目之前，请阅读下方的blmstr的回答，检测实际触摸支持更为复杂，Modernizr只涵盖了基本用例。

Modernizr是一种在任何网站上进行各种特性检测的轻量级方法。

它只是为每个特性在html元素中添加类。

然后您可以在CSS和JS中轻松地针对这些特性进行定位。例如：

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

以及JavaScript（jQuery示例）：

$('html.touch #popup').hide();