Bagaimanakah Saya Boleh Mengesan Peranti Bukan Skrin Sentuh dengan Amanah Menggunakan Pertanyaan Media atau JavaScript?

Mengenal pasti Peranti Bukan Skrin Sentuh dengan Pertanyaan Media

Pengenalan:

Menentukan sama ada peranti didayakan skrin sentuh adalah penting untuk meningkatkan pengalaman pengguna dalam pembangunan web. Pertanyaan media menyediakan cara yang mudah untuk menyesuaikan kandungan dan kefungsian berdasarkan keupayaan peranti. Artikel ini menyelidiki teknik pertanyaan media paling selamat untuk mengesan peranti bukan skrin sentuh dan meneroka penyelesaian alternatif.

Penyelesaian Pertanyaan Media:

Draf pertanyaan media CSS4 memperkenalkan inovatif ciri 'penunjuk' untuk bertanya tentang ketersediaan dan ketepatan peranti penunjuk, seperti tetikus. Ia menyediakan tiga nilai yang mungkin:

• tiada: Menunjukkan ketiadaan peranti penunjuk.
• kasar: Mewakili peranti dengan peranti penunjuk dengan ketepatan terhad.
• baik: Menandakan peranti penunjuk yang tepat.

Menggunakan ciri ini, anda boleh melaksanakan pertanyaan media seperti ini:

@media (pointer:coarse) {
    /* Code to adjust interface for coarse pointing devices */
}

Keserasian Pelayar:

Sehingga Januari 2013, pertanyaan media 'penunjuk' disokong dalam Chrome pada Windows tetapi bukan pada iOS atau Safari pada iOS 6.

Penyelesaian Alternatif: JavaScript

Jika pertanyaan media tidak disokong, anda boleh mempertimbangkan penyelesaian JavaScript seperti berikut:

if (!window.Touch) {
    // Code to handle non-touchscreen scenarios
}

Kesimpulan:

Pertanyaan media 'penunjuk' dalam CSS4 menyediakan cara yang mantap untuk mengesan peranti bukan skrin sentuh. Walau bagaimanapun, keserasian pelayar perlu diambil kira. Sebagai alternatif, penyelesaian JavaScript seperti '!window.Touch' boleh digunakan untuk mencapai hasil yang sama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Peranti Bukan Skrin Sentuh dengan Amanah Menggunakan Pertanyaan Media atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!