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

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();