Bagaimanakah Pembangun Web Dapat Mengesan Ketiadaan Tetikus untuk Antara Muka Mesra Sentuhan?

Mengesan Ketiadaan Tetikus untuk Antara Muka Mesra Sentuhan

Apabila membangunkan aplikasi web, adalah penting untuk menampung pengalaman pengguna yang berbeza antara input sentuhan dan tetikus. Untuk memastikan antara muka yang paling sesuai untuk pengguna, mengesan kehadiran atau ketiadaan tetikus adalah penting.

API Tahap 1

Jawapan yang disediakan mencadangkan untuk melaksanakan API berikut:

• hasTouch(): Mengembalikan benar jika peranti tidak mempunyai tetikus.
• hasMouse(): Mengembalikan palsu jika peranti tidak mempunyai tetikus.

API Tahap 2 (Cadangan Berpotensi)

Walaupun API Tahap 2 yang dicadangkan (panggilan balik untuk mendengar perubahan dalam hasTouch() dan hasMouse()) mungkin tidak dapat dilaksanakan pada masa ini, ia tetap menarik konsep untuk penerokaan masa hadapan.

Pengesanan Tetikus Boleh Dipercayai

Pada 2018, ciri interaksi media CSS4 muncul sebagai penyelesaian yang mantap untuk mengesan kehadiran tetikus:

Ciri Media Interaksi:

• penunjuk: kasar: Peranti mempunyai peranti penunjuk ketepatan rendah.
• penunjuk: halus: Peranti mempunyai peranti penunjuk ketepatan tinggi.
• penunjuk: tiada: Peranti tidak mempunyai peranti penunjuk.

Ciri Media Tuding:

• tuding: Tuding: Peranti boleh tuding dengan mudah.
• tuding: tiada: Peranti tidak boleh tuding atau tiada peranti penunjuk.

Pelaksanaan JavaScript:

Pertanyaan media boleh digunakan dalam JavaScript untuk mengenal pasti ketiadaan tetikus:

<code class="javascript">if (window.matchMedia("(any-hover: none)").matches) {
  // User has no mouse
}</code>

Kesimpulan:

Dengan memanfaatkan ciri interaksi media CSS4, pembangun web dapat mengesan kehadiran atau ketiadaan tetikus dengan berkesan dan menyampaikan antara muka yang disesuaikan yang dioptimumkan untuk interaksi berasaskan sentuhan atau tetikus.

Atas ialah kandungan terperinci Bagaimanakah Pembangun Web Dapat Mengesan Ketiadaan Tetikus untuk Antara Muka Mesra Sentuhan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!