使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？

javascript jquery touch

2022-08-29 23:08:53

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

这可能吗？

答案 1

更新 2021

要查看旧答案：检查历史记录。我决定从头开始，因为在帖子中保留历史记录时会失控。

我最初的答案是，使用与Modernizr相同的功能可能是一个好主意，但这不再有效，因为他们删除了这个PR上的“touchevents”测试：https://github.com/Modernizr/Modernizr/pull/2432 因为它是一个令人困惑的主题。

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

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

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

答案 2

更新：在将整个功能检测库拉入您的项目之前，请阅读blmstr的答案。检测实际的触摸支持更为复杂，Modernizr 仅涵盖基本用例。

Modernizr是一种很好，轻量级的方式，可以在任何网站上进行各种功能检测。

它只是将类添加到每个功能的 html 元素中。

然后，您可以在CSS和JS中轻松定位这些功能。例如：

html.touch div {
    width: 480px;
}

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

和Javascript（jQuery示例）：

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