Bagaimanakah Saya Boleh Mengesan Peranti Bukan Skrin Sentuh Menggunakan Pertanyaan Media CSS?

Mengesan Peranti Bukan Skrin Sentuh dengan Pertanyaan Media

Pertanyaan media CSS menyediakan cara mudah untuk menyesuaikan penggayaan tapak web berdasarkan pelbagai ciri peranti. Semasa menentukan sama ada peranti adalah skrin sentuh tidak disokong secara langsung oleh pertanyaan media, terdapat ciri media baru muncul yang menangani isu ini.

Ciri Media 'penunjuk' CSS4

Draf pertanyaan media CSS4 memperkenalkan ciri media 'penunjuk', yang menanyakan kehadiran dan ketepatan peranti penunjuk pada peranti. Ciri ini mengambil nilai berikut:

• 'tiada': Tiada peranti penunjuk tersedia.
• 'kasar': A peranti penunjuk dengan ketepatan terhad tersedia.
• 'fine': Alat yang sangat tepat peranti penunjuk tersedia.

Menggunakan Ciri Media 'penunjuk'

Ciri media 'penunjuk' boleh digunakan seperti berikut untuk menyasarkan peranti bukan skrin sentuh:

@media (pointer:coarse) {
    /* CSS styles for non-touchscreen devices */
}

Keserasian Pelayar

Ciri media 'penunjuk' kini disokong dalam sesetengah penyemak imbas, tetapi keserasian berbeza-beza. Untuk mendapatkan maklumat terkini tentang keserasian penyemak imbas, rujuk Quirksmode.

Penyelesaian JavaScript Alternatif

Jika penggayaan khusus peranti tidak boleh dicapai menggunakan ciri media 'penunjuk', pertimbangkan untuk menggunakan penyelesaian JavaScript. Pendekatan biasa termasuk:

• !window.Touch: Mengesan ketiadaan skrin sentuh.
• Modernizr: Menyediakan set komprehensif alat pengesanan ciri, termasuk skrin sentuh pengesanan.

Kesimpulan

Ciri media 'penunjuk' menawarkan cara yang mudah untuk mengesan peranti bukan skrin sentuh dalam pertanyaan media CSS. Walau bagaimanapun, ia masih dalam pembangunan dan mempunyai sokongan pelayar yang terhad. Untuk penyelesaian berasaskan JavaScript alternatif, pertimbangkan !window.Touch atau Modernizr.

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