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

Question

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

javascriptjquerytouchtablet

32

有没有一种好的、简洁的方法或技巧来判断用户是否在触摸设备上？

我知道有像这样的东西： var isiPad = navigator.userAgent.match(/iPad/i) != null;

但我只是想知道有没有一种通用的方法来确定用户是否在触摸设备上？因为现在市面上存在许多不仅仅是iPad的触摸设备和平板电脑。

谢谢。

- matt

6个回答

14

引入Modernizer，它是一个小型的特性检测库。之后您可以使用以下类似的代码。

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

- Gcoop

2

特征检测 > UA检查。 - Joel Glovier

14

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

在浏览了很多地方之后，我发现这是最简单的代码

- Pratswinz

我不会相信这个，因为它在我的Mac上显示为真，而我的Mac并不是一个触摸设备。这只是询问浏览器是否支持它..我想。 - carinlynchin

4

document.createEvent("TouchEvent") 不能在桌面设备上使用。所以，您可以在 if 语句中使用它。

请注意，此方法可能会在非触摸设备上产生错误。我建议检查 document.documentElement 中的 ontouchstart。

- Julian F. Weinert

2

看看这篇文章，它提供了一个非常好的代码片段，用于检测触摸设备或在调用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();
}

- Safran Ali

1

如果您使用 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，您可以将上面的Modernizr.touch函数简单替换为('ontouchstart' in document.documentElement) 另外，请注意测试用户代理iemobile将为您提供比Windows Phone更广泛的检测到的Microsoft移动设备范围。此外，还可以参考这个SO问题

- j7m

你的用户代理检测逻辑有问题：你假设每个移动设备都有触摸屏。例如，一些黑莓型号（OS <= 7）并没有触摸屏。即使在 iPhone 上，有人可能创建一个通过眼动控制的浏览器，它不支持触摸事件。最后，你可以使用 /Mobile/i 正则表达式来代替那个冗长的 OR。 - Mister Smith

关于触摸屏或台式机，这并不能检测到。 - MGot90

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mplungjan · Accepted Answer

你可以使用以下的JS函数：

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

来源：检测基于触摸的浏览。

请注意，上面的代码仅测试浏览器是否支持触摸，而不是设备。