Bagaimanakah Saya Boleh Mengesan Skrin Sentuh Menggunakan CSS dan JavaScript?

Mengesan Skrin Sentuh dengan Pertanyaan Media

Dalam bidang reka bentuk web responsif, adalah penting untuk menyesuaikan kandungan kepada peranti input yang berbeza. Menentukan sama ada peranti ialah skrin sentuh boleh meningkatkan pengalaman pengguna dengan pelarasan yang sesuai.

Penyelesaian Pertanyaan Media

Draf pertanyaan media CSS4 menyediakan ciri khusus untuk tujuan ini: 'penunjuk'. Ia menawarkan tiga nilai:

• tiada: Tiada peranti penunjuk
• kasar: Peranti penunjuk ketepatan rendah
• baik: Penunjuk tepat peranti

Penggunaan:

@media (pointer:coarse) {
    /* Adjust styles for low-accuracy pointing devices */
}

Keserasian:

Mulai 22 Januari 2013, keserasian penyemak imbas adalah seperti berikut:

• Chrome/Win: Disokong
• Chrome/iOS: Tidak disokong
• Safari/iOS6: Tidak disokong

Alternatif JavaScript:

Sementara pertanyaan media 'penunjuk' terhad dalam sokongan penyemak imbas, tawaran penyelesaian JavaScript alternatif:

• !window.Touch: Mengesan input sentuhan
• Modernizr: Pustaka yang menyediakan pelbagai keupayaan peranti, termasuk skrin sentuh pengesanan

Kesimpulan:

Menggunakan pertanyaan media 'penunjuk' apabila tersedia ialah kaedah paling tepat untuk mengesan skrin sentuh. Walau bagaimanapun, untuk peranti tanpa sokongan, penyelesaian JavaScript seperti !window.Touch boleh digunakan dengan berkesan.

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