如何使用 JavaScript 检测触摸屏设备？

现在许多设备都自带触摸屏，而对于开发者而言，检测用户是否使用的是触摸屏设备显得尤为重要。以下是一些可以用来检测触摸屏设备的方法。

使用window.matchMedia()

window对象有一个matchMedia()方法，该方法可以判断浏览器是否支持某种媒体查询。我们可以使用这个方法来判断是否支持交互式媒体查询。代码如下所示：

if (window.matchMedia("(pointer:coarse)").matches) {
    console.log("这是一台触摸屏设备");
} else {
    console.log("这不是一台触摸屏设备");
}

使用这种方法，我们可以判断设备是否支持与鼠标不同的指针设备。

使用touchstart事件

在触摸屏设备上，我们可以使用touchstart事件来检测用户是否触摸屏幕。如果touchstart事件触发，那么就可以认为用户正在使用触摸屏设备。代码如下所示：

if ('ontouchstart' in document.documentElement) {
    console.log("这是一台触摸屏设备");
} else {
    console.log("这不是一台触摸屏设备");
}

这个方法的缺点是，如果用户正在使用桌面设备并使用触摸屏模拟器，则无法检测到这种情况。

使用Navigator.maxTouchPoints属性

Navigator对象有一个maxTouchPoints属性，该属性表示设备支持的最大触点数。如果该属性值大于0，则客户端设备至少支持触摸屏设备。代码如下所示：

if (navigator.maxTouchPoints) {
    console.log("这是一台触摸屏设备");
} else {
    console.log("这不是一台触摸屏设备");
}

这个方法的缺点是，不是所有浏览器都支持该属性。

小结

检测触摸屏设备的方法有很多，本文介绍了使用matchMedia()、touchstart事件和Navigator.maxTouchPoints属性三种方法。根据不同的需求，我们可以选择不同的方法。