如何确定客户端是否是触摸设备

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