JavaScript-Trick: Wie erkennt man Touchscreen-Geräte effizient?

Question

Ich habe ein jQuery-Plugin für Desktop- und Mobilgeräte geschrieben. Ich frage mich, ob es eine Möglichkeit gibt, mithilfe von JavaScript zu erkennen, ob ein Gerät über Touchscreen-Funktionen verfügt. Ich verwende jquery-mobile.js, um Touchscreen-Ereignisse zu erkennen, und es funktioniert auf iOS, Android usw., aber ich möchte auch eine bedingte Anweisung schreiben, die darauf basiert, ob das Gerät des Benutzers über einen Touchscreen verfügt oder nicht.

Ist das möglich?

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();