如何確定客戶端是否是觸摸設備

Question

是否有任何漂亮和乾淨的方法或技巧來確定用戶是否在觸摸設備上？

我知道有這樣的東西 var isiPad = navigator.userAgent.match(/iPad/i) != null;

，但我只是不知道是否有一招，大致判斷用戶是否是觸摸屏設備上？ 因爲有更多的觸摸設備和平板電腦，那麼只有iPad。

謝謝。

Answer 1

您可以使用下面的JS函數：

function isTouchDevice() { 
    var el = document.createElement('div'); 
    el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart" 
    return typeof el.ongesturestart === "function"; 
} 

來源：Detecting touch-based browsing。

請注意上面的代碼只測試瀏覽器是否支持觸摸，而不是設備。

相關鏈接：

• Optimize website for touch devices
• What is the best way to detect a mobile device in jQuery?
• What's the best way to detect a 'touch screen' device using JavaScript?
• Mozilla.org Detecting touch: it’s the ‘why’, not the ‘how’

可能有檢測jquery for mobile和jtouch

Answer 2

包括modernizer，這是一個很小的特徵檢測庫。然後你可以使用下面的東西。

if (Modernizr.touch){ 
    // bind to touchstart, touchmove, etc and watch `event.streamId` 
} else { 
    // bind to normal click, mousemove, etc 
} 

Answer 3

看看這個post，它給出了檢測觸摸設備時該怎麼做還是怎麼做，如果touchstart事件被稱爲一個非常好的代碼片段：

$(function(){ 
    if(window.Touch) { 
    touch_detect.auto_detected(); 
    } else { 
    document.ontouchstart = touch_detect.surface; 
    } 
}); // End loaded jQuery 
var touch_detect = { 
    auto_detected: function(event){ 
    /* add everything you want to do onLoad here (eg. activating hover controls) */ 
    alert('this was auto detected'); 
    activateTouchArea(); 
    }, 
    surface: function(event){ 
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */ 
    alert('this was detected by touching'); 
    activateTouchArea(); 
    } 
}; // touch_detect 
function activateTouchArea(){ 
    /* make sure our screen doesn't scroll when we move the "touchable area" */ 
    var element = document.getElementById('element_id'); 
    element.addEventListener("touchstart", touchStart, false); 
} 
function touchStart(event) { 
    /* modularize preventing the default behavior so we can use it again */ 
    event.preventDefault(); 
} 

Answer 4

使用document.createEvent("TouchEvent")將無法​​正常工作在桌面設備上。所以你可以在if語句中使用它。

請注意，此方法可能會在非觸摸設備上產生錯誤。我寧願檢查document.documentElement中的ontouchstart。

Answer 5

if ("ontouchstart" in document.documentElement) 
{ 
    alert("It's a touch screen device."); 
} 
else 
{ 
alert("Others devices"); 
} 

最簡單的代碼，我發現這裏瀏覽了很多之後，有

Answer 6

如果使用Modernizr，它是非常容易使用Modernizr.touch如前所述。

但是，我更喜歡使用Modernizr.touch和用戶代理測試的組合，以確保安全。

var deviceAgent = navigator.userAgent.toLowerCase(); 

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) || 
deviceAgent.match(/(android)/) || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i)); 

if (isTouchDevice) { 
     //Do something touchy 
    } else { 
     //Can't touch this 
    } 

如果你不使用Modernizr的，你可以簡單地替換上面('ontouchstart' in document.documentElement)

還要注意的是測試用戶代理iemobile會給你發現微軟的移動設備的範圍更廣比Windows Phone的Modernizr.touch功能。

Also see this SO question