如何使用瀏覽器媒體查詢偵測觸控設備

本文探討了在 Web 開發中偵測使用者輸入裝置（觸控、滑鼠、觸控筆）的可靠方法，超越了螢幕尺寸檢查或使用者代理嗅探等不可靠的技術。 重點是利用 CSS 媒體查詢，特別是 pointer、hover 和 any-pointer 來進行準確的設備功能檢測。 這些查詢提供有關輸入模式的精確信息，從而實現更易於訪問和響應更快的 Web 應用程式。

雖然更簡單的方法可能看起來很方便，但它們通常會產生不準確的結果。例如，使用者將滑鼠連接到智慧型手機會使基於尺寸的假設失效。 CSS 媒體查詢提供了卓越的解決方案，根據實際設備特性提供精確的資料。

CSS 媒體查詢：可靠的方法

本文深入研究了 pointer 和 hover 媒體查詢，示範了它們作為 React hooks 的實作。

pointer媒體查詢

pointer 媒體查詢決定定點設備的存在與精確度。它會傳回三個值之一：

• 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;
  }
};

偵測額外的指標功能

雖然只有一個主指針存在，但設備可以有輔助指針（例如藍牙鍵盤、操縱桿）。 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 查詢結合可以實現更精確的設備識別。

例如，偵測手寫筆作為主要輸入：

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中文網其他相關文章！