Trik JavaScript: Bagaimana untuk mengesan peranti skrin sentuh dengan cekap?

Question

Saya menulis pemalam jQuery untuk desktop dan peranti mudah alih. Saya tertanya-tanya sama ada terdapat cara untuk mengesan sama ada peranti mempunyai keupayaan skrin sentuh menggunakan JavaScript. Saya menggunakan jquery-mobile.js untuk mengesan peristiwa skrin sentuh dan ia berfungsi pada iOS, Android, dsb., tetapi saya juga ingin menulis pernyataan bersyarat berdasarkan sama ada peranti pengguna mempunyai skrin sentuh atau tidak.

Adakah ini mungkin?

Answer 1

Dikemas kini 2021

Untuk melihat jawapan lama: semak sejarah. Saya memutuskan untuk bermula dari awal kerana ia semakin tidak terurus apabila menyimpan sejarah dalam siaran.

Jawapan asal saya mengatakan adalah mungkin untuk menggunakan fungsi yang sama yang digunakan oleh Modernizr, tetapi itu tidak lagi sah kerana mereka mengalih keluar ujian "touchevents" dalam PR ini: https://github.com/Modernizr/Modernizr/pull/ 2432 , kerana ini adalah subjek yang mengelirukan.

Setelah berkata demikian, ini sepatutnya menjadi cara yang cukup baik untuk mengesan sama ada penyemak imbas "mampu sentuh":

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}

Tetapi untuk kes penggunaan yang lebih maju, orang yang lebih bijak daripada saya telah menulis artikel mengenai topik ini dan saya syorkan membaca artikel ini:

• Stu Cox: Tidak dapat mengesan skrin sentuh
• Kesan sentuhan: fokus pada "mengapa", bukan "bagaimana"
• Pengenalan sentuhan oleh Patrick H. Lauke

Answer 2

Kemas kini: Sebelum membawa keseluruhan perpustakaan pengesanan ciri ke dalam projek anda, sila baca jawapan blmstr di bawah, mengesan sokongan sentuhan sebenar adalah lebih kompleks dan Modernizr hanya meliputi kes penggunaan asas.

Modernizr ialah cara ringan untuk melakukan pelbagai pengesanan ciri di mana-mana tapak web.

Ia hanya menambah kelas dalam elemen html untuk setiap atribut.

Anda kemudian boleh menyasarkan ciri ini dengan mudah dalam CSS dan JS. Contohnya:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

Dan JavaScript (contoh jQuery):

$('html.touch #popup').hide();