JavaScript でタッチデバイスかどうかを判定する

JavaScript でタッチデバイスかどうかを判定する方法のひとつとして Window.matchMedia() を使う方法がある。

タッチデバイスは '(hover: none)' に該当するので、 MediaQueryList.matches プロパティを条件にし、それにマッチする場合の処理を書く。

if (window.matchMedia('(hover: none)').matches) {
  console.log('this is a touch device');
} else {
  console.log('this is a mouse device');
}

参考

• Window: matchMedia() method - Web APIs | MDN
• hover - CSS: Cascading Style Sheets | MDN
• MediaQueryList: matches property - Web APIs | MDN