JavaScript 检测触摸设备

在现今的移动设备普及的时代，开发人员需要在网站或应用程序中考虑触摸设备的使用。当用户使用移动设备浏览器时，我们需要检测触摸设备并相应地调整用户界面和功能。

以下是一些用于检测触摸设备的 JavaScript 方法：

方法一：使用 ontouchstart 事件

在移动设备上，触摸屏幕会触发 ontouchstart 事件。因此，我们可以检测该事件是否受支持来判断设备是否为触摸设备。下面是一个简单的示例代码：

// 判断是否为触摸设备
if ('ontouchstart' in window) {
  // 触摸设备代码
} else {
  // 非触摸设备代码
}

方法二：使用 maxTouchPoints 属性

大多数现代浏览器都支持 maxTouchPoints 属性，可以用来检测是否支持多点触控。对于不支持 maxTouchPoints 属性的旧版浏览器，则可以使用 msMaxTouchPoints 或 mozMaxTouchPoints 属性。

// 判断是否为触摸设备
if (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement) {
  // 触摸设备代码
} else {
  // 非触摸设备代码
}

方法三：使用 navigator.userAgent 属性

在某些情况下，我们需要更精细地识别设备类型。我们可以通过检查 navigator.userAgent 属性来获取设备型号和浏览器信息。以下是一个简单的示例：

// 设备检测
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  // 移动设备代码
} else {
  // 非移动设备代码
}

以上是三种主要的检测方法。当然，也有其他更复杂的检测方法，但通常并不需要使用。在开发过程中，我们应该确保我们的代码适用于移动设备和桌面设备，以提供最佳的用户体验。

参考链接：Detecting Touch Devices with JavaScript