Bagaimanakah Kami Boleh Menentukan Peranti Sentuhan Sahaja Dengan Tepat dalam Aplikasi Web?

Menentukan Keupayaan Input Peranti untuk Antara Muka Sentuhan Sahaja

Mengesan sama ada pengguna menggunakan peranti sentuh sahaja adalah penting untuk menyesuaikan pengguna antara muka aplikasi web dengan sewajarnya. Jawapan semasa untuk soalan ini menyediakan kaedah untuk mencapainya menggunakan keupayaan acara sentuh. Walau bagaimanapun, pendekatan ini tidak mencukupi kerana ia tidak dapat membezakan antara peranti yang mempunyai kedua-dua keupayaan input tetikus dan sentuhan.

Penyelesaian yang lebih tepat ialah menggunakan ciri interaksi media CSS4. Ciri ini membolehkan pembangun menanyakan kehadiran dan ketepatan peranti penunjuk, seperti tetikus atau skrin sentuh. Pilihan berikut tersedia:

<code class="css">@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device</code>

<code class="css">@media (hover: hover) { ... } // Can hover
@media (hover: none) { ... } // Cannot hover</code>

<code class="css">@media (any-hover: hover) { ... } // Any input device can hover
@media (any-hover: none) { ... } // No input device can hover</code>

Dengan memasukkan pertanyaan media ini ke dalam JavaScript, ia menjadi mungkin untuk menentukan keupayaan input pengguna:

<code class="js">if(window.matchMedia("(any-hover: none)").matches) {
    // Touch-only device
}</code>

Selain itu, adalah penting untuk mempertimbangkan bahawa kekurangan input tetikus juga mungkin menunjukkan kehadiran peranti papan kekunci sahaja. Ciri interaksi media CSS4 boleh mengesan kedua-dua jenis pengehadan input dengan berkesan.

Atas ialah kandungan terperinci Bagaimanakah Kami Boleh Menentukan Peranti Sentuhan Sahaja Dengan Tepat dalam Aplikasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!