JavaScriptでタッチスクリーンデバイスを検出する最良の方法とは？

JavaScriptによるタッチデバイスの判定方法

「タッチスクリーン」対応デバイスを確実に検出する最良の方法は、DOM（ドキュメントオブジェクトモデル）内にタッチ関連のイベントやメソッドが存在するかどうかを確認することです。

最もシンプルで広く使われている手法が、ontouchstartプロパティの有無をチェックする方法です。

基本的な検出コード

function checkTouchDevice() {
    return 'ontouchstart' in document.documentElement;
}

この関数は、document.documentElement（HTML要素）にontouchstartイベントハンドラが存在するかを確認し、タッチ操作に対応している場合はtrue、そうでなければfalseを返します。

モバイルとデスクトップの判別に活用する

この関数を応用すれば、アクセスしてきたユーザーがモバイルデバイスなのかデスクトップPCなのかを簡単に判別できます。

if (checkTouchDevice()) {
    // タッチ対応デバイス（モバイル・タブレット）
} else {
    // デスクトップPC
}

より正確な判定には maxTouchPoints も併用しよう

ontouchstartのチェックは手軽ですが、環境によっては検出精度に課題がある場合もあります。より堅牢にしたい場合は、navigator.maxTouchPointsとの組み合わせがおすすめです。

function checkTouchDevice() {
    return ('ontouchstart' in document.documentElement) || 
           (navigator.maxTouchPoints > 0);
}

navigator.maxTouchPointsは、デバイスが同時に処理できるタッチポイントの最大数を返します。この値が0より大きければ、タッチ入力に対応していると判断できます。特に最近のWindowsノートPCのように、マウスとタッチの両方に対応したハイブリッド型デバイスも増えているため、複数の条件を組み合わせることで誤検出を減らせます。

注意点

• タッチ非対応のデバイスでも、ブラウザの設定やエミュレーターによってはontouchstartが存在することがあります。
• 近年はデスクトップPCでもタッチ対応画面を搭載する機会が増えたため、「タッチ＝モバイル」と単純に結論づけるのは避けましょう。

用途に応じて適切な検出方法を選び、レスポンシブなWeb体験を提供してください。