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

2020/12/282023/08/22

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

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

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

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

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

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

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

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

CSS@media (pointer: coarse) {
  /* 正確性が限定されている */
}

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

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

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

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