ブラウザのメディアクエリを使用してタッチデバイスを検出する方法

この記事では、画面サイズのチェックやユーザー エージェント スニッフィングなどの信頼性の低い手法を超えて、Web 開発におけるユーザー入力デバイス (タッチ、マウス、スタイラス) を検出するための信頼できる方法を探ります。 正確なデバイス機能の検出のために、CSS メディア クエリ、特に pointer、hover、および any-pointer を活用することに重点が置かれています。 これらのクエリは入力モダリティに関する正確な情報を提供し、よりアクセスしやすく応答性の高い Web アプリケーションにつながります。

単純なアプローチは便利に見えるかもしれませんが、多くの場合不正確な結果が得られます。たとえば、ユーザーがマウスをスマートフォンに接続すると、サイズに基づく仮定が無効になります。 CSS メディア クエリは、実際のデバイス特性に基づいた正確なデータを提供する優れたソリューションを提供します。

CSS メディア クエリ: 信頼できるアプローチ

この記事では、pointer と hover メディア クエリについて詳しく説明し、React フックとしての実装を示します。

pointer メディア クエリ

pointer メディア クエリは、ポインティング デバイスの存在と精度を決定します。 3 つの値のいずれかを返します:

• none: 使用可能なポインティング デバイスがありません (音声制御デバイスなど)。
• coarse: ポインティング デバイスは存在しますが、精度が不足しています (タッチスクリーン上の指など)。
• fine: 高精度のポインティング デバイス (マウスなど) が利用可能です。

window.matchMedia メソッドは、コード内でメディア クエリ結果に簡単にアクセスできるようにします。

useMatchMedia フック

コードの冗長性を避けるために、メディア クエリの結果を取得して追跡するためのカスタム useMatchMedia フックが作成されます。 このフックは window.matchMedia を利用し、クエリの一致ステータスの変化を検出するイベント リスナーを追加します。 クリーンアップ関数により、コンポーネントがアンマウントされるかクエリが変更されたときにリスナーが確実に削除されます。

export const useMatchMedia = (query: string) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [matches, query]);

  return matches;
};

プライマリ ポインター機能の検出

usePrimaryPointerQuery フックは、プライマリ ポインターの型を決定します。 useMatchMedia、none、coarse ポインタ型のクエリで fine を呼び出し、Pointers 列挙型から適切な値を返します。

import { useMatchMedia } from './useMatchMedia.ts';
import { Pointers } from './types.ts';

export const usePrimaryPointerQuery = () => {
  const isNone = useMatchMedia('(pointer: none)');
  const isCoarse = useMatchMedia('(pointer: coarse)');
  const isFine = useMatchMedia('(pointer: fine)');
  if (isNone) {
    return Pointers.none;
  } else if (isCoarse) {
    return Pointers.coarse;
  } else if (isFine) {
    return Pointers.fine;
  }
};

追加のポインター機能の検出

プライマリ ポインタは 1 つだけ存在しますが、デバイスはセカンダリ ポインタを持つことができます (Bluetooth キーボード、ジョイスティックなど)。

メディア クエリは、使用可能なポインタの精度をチェックします。 any-pointer フックはポインター型を受け入れ、動的に生成されたクエリ文字列で useAnyPointerQuery を使用します。useMatchMedia

export const useMatchMedia = (query: string) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [matches, query]);

  return matches;
};

動作デモ

フックを紹介する完全なデモが利用可能です:

高度な検出: hover および any-hover

hover および any-hover メディア クエリは、ホバー機能をチェックすることで検出をさらに絞り込みます。 これらを pointer クエリと組み合わせることで、より正確なデバイスの識別が可能になります。

Pointer value	Hover value	Device
coarse	none	Modern touch screens
fine	none	Stylus-based devices
coarse	hover	Joystick or TV remote
fine	hover	Mouse

たとえば、プライマリ入力としてスタイラスを検出する場合:

import { useMatchMedia } from './useMatchMedia.ts';
import { Pointers } from './types.ts';

export const usePrimaryPointerQuery = () => {
  const isNone = useMatchMedia('(pointer: none)');
  const isCoarse = useMatchMedia('(pointer: coarse)');
  const isFine = useMatchMedia('(pointer: fine)');
  if (isNone) {
    return Pointers.none;
  } else if (isCoarse) {
    return Pointers.coarse;
  } else if (isFine) {
    return Pointers.fine;
  }
};

このアプローチにより、ユーザー入力デバイスのより堅牢かつ正確な検出が保証され、ユーザー エクスペリエンスとアクセシビリティが向上します。

以上がブラウザのメディアクエリを使用してタッチデバイスを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。