JavaScriptでタッチデバイスを検出する方法

タッチ機能の検出

デバイスがタッチ入力をサポートしているかの検出はUIインタラクションの適応に重要ですが、単純なブーリアンチェック以上に複雑です。

推奨アプローチ

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

各チェックの説明

navigator.maxTouchPoints: 同時タッチポイントの最大数を返します。0はタッチ非対応を意味します。最も信頼性の高い単一チェックです。

'ontouchstart' in window: ブラウザがタッチイベントを公開しているかをチェックします。

ハイブリッドデバイスの問題

タッチスクリーン付きノートPCはマウスとタッチの両方を持っています。タッチを一度検出するのではなく、両方をサポートするUIを設計しましょう。

ベストプラクティス

1. JavaScript検出よりCSSメディアクエリ（pointer、hover）を優先する
2. タッチ＝モバイル、非タッチ＝デスクトップと想定しない
3. タッチサポートに関係なくキーボードアクセシビリティを常に提供する
4. 統一入力処理にPointerEvent APIを使用する