判断是否触屏 JS

在制作响应式或移动端页面时，我们常常需要针对不同的设备类型做出不同的适配方案。而触屏设备和传统的鼠标设备在事件上存在着一定的差异，一些针对鼠标事件的处理方法在触屏设备上可能会出现问题，因此我们需要判断当前用户所使用的设备是否为触屏设备，以便针对性地选择事件处理方式。

以下是几种判断是否为触屏设备的 JS 方法。

1. 判断是否支持 touch 事件

由于触屏设备支持 touch 事件，因此我们可以通过判断是否支持该事件来判断当前设备是否为触屏设备。

代码片段

function isTouchDevice() {
  return 'ontouchstart' in window || 'onmsgesturechange' in window;  //若支持 touch 则为触屏设备
}

Markdown 解释

上述代码定义了一个名为 isTouchDevice 的函数，该函数判断一个设备是否支持 touch 事件，若支持则返回 true（视为触屏设备），否则返回 false。

此方法比较简单易懂，但其并不能确保设备一定为触屏设备，有一定的误判概率。

2. 判断是否为移动设备

除了 touch 事件外，移动设备和桌面设备在很多方面都有所差异，我们可以通过判断当前设备是否为移动设备来判断其是否为触屏设备。

代码片段

function isMobileDevice() {
  return /Mobi/i.test(navigator.userAgent); //若为移动设备则为触屏设备
}

Markdown 解释

上述代码定义了一个名为 isMobileDevice 的函数，该函数使用正则表达式判断当前设备的 user agent 是否包含 Mobi，若包含则视其为移动设备，即视其为触屏设备。

此方法比较简单，但也存在误判概率较高的问题，因为某些桌面设备的 user agent 可能也会包含 Mobi 字段。

3. 判断设备是否支持触摸

我们也可以通过检测设备是否支持触摸来判断其是否为触屏设备。

代码片段

function isTouchDevice() {
  try {
    document.createEvent("TouchEvent");  //若能创建 TouchEvent 则为触屏设备
    return true;
  } catch (e) {
    return false;
  }
}

Markdown 解释

上述代码定义了一个名为 isTouchDevice 的函数，该函数尝试创建一个 TouchEvent 对象，若成功创建则视其为触屏设备，否则不是。

此方法相对来说比较准确，但由于一些浏览器的兼容性问题，可能存在问题。

4. 使用 Modernizr 库

Modernizr 是一个常用的用于检测浏览器特性支持情况的库，它可以检测大量的特性，并且可以自定义扩展，其中包括了检测是否支持触摸的特性。

代码片段

<script src="path/to/modernizr.js"></script>
<script>
if (Modernizr.touch) {
  //触屏设备相关处理
} else {
  //非触屏设备相关处理
}
</script>

Markdown 解释

上述代码首先引入了 Modernizr 库，然后根据库中提供的 touch 特性来判断当前设备是否为触屏设备。

这种方法相对比较简单，而且 Modernizr 还提供了许多有用的特性检测，十分方便实用。

结语

针对触屏设备和传统鼠标设备的适配问题，在开发过程中需要综合考虑各个方面，从多个角度来判断当前设备是否为触屏设备，找到最适合自己实际情况的方法。