JavaScript でタッチデバイスかを検出する
MediaQueryList を使用してデバイスがタッチデバイスかポインターデバイスかを検出できます。
次の記事で紹介されていた、CSSのMediaQueryでタッチデバイスかを判定する方法の応用です。
code:js
const mediaQuery = window.matchMedia('(hover: none) and (pointer: coarse)');
mediaQuery.matches // タッチデバイスなら true
また、次のようなReact Hooksを用意すれば、タッチデバイス・ポインターデバイスをリアルタイムに検出できます。
code:ts
const useTouchDevice = () => {
useEffect(() => {
const mediaQuery = window.matchMedia('(hover: none) and (pointer: coarse)');
setIsTouchDevice(mediaQuery.matches);
const handleMediaQueryChanged = (event: MediaQueryListEvent) => {
setIsTouchDevice(event.matches);
};
mediaQuery.addEventListener('change', handleMediaQueryChanged);
return () => {
mediaQuery.removeEventListener('change', handleMediaQueryChanged);
};
});
return { isTouchDevice };
};
タッチデバイス・ポインターデバイスが切り替わるケースなんて、DevToolsで見ているときくらいだと思いますが、知っているといつか生きるかも?しれません。
余談:
紹介した記事にも書かれていますが、次のMediaQueryでWiiのコントローラーやKinectといったセンサーを使用したポインターからの入力かを検出できるらしいです(未検証)
code:js
const mediaQuery = window.matchMedia('(hover: hover) and (pointer: coarse)');