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)');