Cara mengesan peranti sentuh menggunakan pertanyaan media penyemak imbas

Artikel ini meneroka kaedah yang boleh dipercayai untuk mengesan peranti input pengguna (sentuhan, tetikus, stylus) dalam pembangunan web, melangkaui teknik yang tidak boleh dipercayai seperti semakan saiz skrin atau menghidu ejen pengguna. Tumpuan adalah untuk memanfaatkan Pertanyaan Media CSS, khususnya pointer, hover dan any-pointer, untuk pengesanan keupayaan peranti yang tepat. Pertanyaan ini memberikan maklumat yang tepat tentang modaliti input, yang membawa kepada aplikasi web yang lebih mudah diakses dan responsif.

Walaupun pendekatan yang lebih ringkas mungkin kelihatan mudah, ia selalunya memberikan hasil yang tidak tepat. Sebagai contoh, pengguna yang menyambungkan tetikus ke telefon pintar membatalkan andaian berdasarkan saiz. Pertanyaan Media CSS menawarkan penyelesaian unggul, menyediakan data tepat berdasarkan ciri peranti sebenar.

Pertanyaan Media CSS: Pendekatan Boleh Dipercayai

Artikel ini menyelidiki pointer dan hover Pertanyaan Media, menunjukkan pelaksanaannya sebagai cangkuk React.

pointer Pertanyaan Media

pointer Pertanyaan Media menentukan kehadiran dan ketepatan peranti penunjuk. Ia mengembalikan satu daripada tiga nilai:

• none: Tiada peranti penunjuk tersedia (cth., peranti kawalan suara).
• coarse: Peranti penunjuk ada tetapi kurang ketepatan (cth., jari pada skrin sentuh).
• fine: Peranti penunjuk yang sangat tepat tersedia (mis., tetikus).

Kaedah window.matchMedia menyediakan akses mudah kepada hasil Pertanyaan Media dalam kod.

useMatchMedia Cangkuk

Untuk mengelakkan lebihan kod, cangkuk useMatchMedia tersuai dibuat untuk mendapatkan dan menjejaki hasil Pertanyaan Media. Cangkuk ini menggunakan window.matchMedia dan menambah pendengar acara untuk mengesan perubahan dalam status padanan pertanyaan. Fungsi pembersihan memastikan pendengar dialih keluar apabila komponen dinyahlekap atau pertanyaan berubah.

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

Mengesan Keupayaan Penunjuk Utama

Cangkuk usePrimaryPointerQuery menentukan jenis penuding utama. Ia memanggil useMatchMedia dengan pertanyaan untuk jenis penuding none, coarse dan fine, mengembalikan nilai yang sesuai daripada Pointers enum.

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

Mengesan Keupayaan Penunjuk Tambahan

Walaupun hanya satu penunjuk utama wujud, peranti boleh mempunyai penunjuk kedua (cth., papan kekunci Bluetooth, kayu bedik). any-pointer Media Query menyemak ketepatan mana-mana penuding yang tersedia. Cangkuk useAnyPointerQuery menerima jenis penuding dan menggunakan useMatchMedia dengan rentetan pertanyaan yang dijana secara dinamik.

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

Demo Kerja

Demo lengkap yang mempamerkan cangkuk tersedia:

Pengesanan Lanjutan: hover dan any-hover

hover dan any-hover Pertanyaan Media memperhalusi pengesanan dengan menyemak keupayaan tuding. Menggabungkan ini dengan pointer pertanyaan membolehkan pengenalan peranti yang lebih tepat.

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

Contohnya, mengesan stilus sebagai input utama:

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

Pendekatan ini memastikan pengesanan peranti input pengguna yang lebih mantap dan tepat, yang membawa kepada pengalaman dan kebolehcapaian pengguna yang lebih baik.

Atas ialah kandungan terperinci Cara mengesan peranti sentuh menggunakan pertanyaan media penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!