タッチスクリーンであるかを JavaScript で判定する

投稿日 2020/12/28 更新日 2022/03/13

タッチスクリーン有無判定

// タッチスクリーン有無判定
const isTouchDevice = function() {
  return 'ontouchstart' in window;
};

console.log('touch screen:', isTouchDevice());

理屈

タッチスクリーンがある場合、window.ontouchstartnullで初期化されます。
タッチスクリーンがない場合、window.ontouchstartは初期化されていません。

別解

navigator.maxTouchPoints

navigator.maxTouchPointsは、同時タッチ点数の最大数を取得します。

if (navigator.maxTouchPoints > 0) {
  // タッチ対応
}
if (navigator.maxTouchPoints > 1) {
  // マルチタッチ対応
}

navigator.msMaxTouchPointsが存在します。
 ただし、 IE11 で navigator.maxTouchPoints に対応しているため、考慮不要です。

pointer: coarse

CSS のメディアクエリです。ポインティングデバイスの正確性を判定できます。

正確性が高い(ponter: fine)場合、ポインティングデバイスは、マウスである可能性が高くなります。
正確性が限定されている(ponter: coarse)場合、ポインティングデバイスは、タッチスクリーンである可能性が高くなります。

CSS@media (pointer: coarse) {
  /* 正確性が限定されている */
}
JavaScriptif (window.matchMedia('(pointer: coarse)').matches) {
  // 正確性が限定されている
}

'orientation' in window

画面の向きを取得します。画面の向きがあるのは、モバイル端末であるため、タッチスクリーンである可能性が高くなります。

window.screen.orientation は、 Safari で非対応です。ですが window.orientation は、 Safari で使用できるため、 'orientation' in window で判定しています。

if ('orientation' in window) {
  // 画面の向きがある
}

補足

マウス有無判定

モバイル環境でもマウス系のリスナーが null で初期化されているため、'onmousedown' in windowで判定しても、マウス有無の判定には使えません。

コメント