JavaScript技巧：如何有效偵測觸控螢幕裝置？

Question

我寫了一個適用於桌面和行動裝置的jQuery插件。我想知道是否有一種方法可以使用JavaScript來偵測裝置是否具有觸控螢幕功能。我正在使用jquery-mobile.js來檢測觸控螢幕事件，並且它在iOS、Android等裝置上都可以工作，但我還想根據用戶的裝置是否具有觸控螢幕編寫條件語句。

這是可能的嗎？

Answer 1

更新2021

#要看舊答案：請查看歷史記錄。我決定從零開始，因為在帖子中保留歷史記錄時變得難以控制。

我的原始答案說可以使用與Modernizr使用的相同函數，但現在已無效，因為他們在此PR中刪除了“touchevents”測試：https://github.com/Modernizr/Modernizr/ pull/2432，因為這是一個容易造成混淆的主題。

話雖如此，這應該是一種相當好的檢測瀏覽器是否具有「觸控功能」的方法：

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

但對於更高級的用例，比我聰明得多的人已經寫過關於這個主題的文章，我建議閱讀這些文章：

• Stu Cox: 無法偵測觸控螢幕
• 偵測觸控：專注於“為什麼”，而不是“如何”
• #Patrick H. Lauke的觸控介紹

Answer 2

更新：在整個特性偵測到庫引入專案之前，請先閱讀下方的blmstr的答案，偵測實際觸控支援更為複雜，Modernizr只涵蓋了基本用例。

Modernizr是一種在任何網站上進行各種特性偵測的輕量級方法。

它只是為每個特性在html元素中添加類別。

然後您可以在CSS和JS中輕鬆地針對這些特性進行定位。例如：

html.touch div {
    width: 480px;
}

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

以及JavaScript（jQuery範例）：

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