使用 Javascript 检测触摸屏设备

var isTouchDevice = 'ontouchstart' in document.documentElement;

注意：仅仅因为设备支持触摸事件并不一定意味着它是专门的触摸屏设备。许多设备（比如我的华硕 Zenbook）同时支持点击和触摸事件，即使它们没有任何实际的触摸输入机制。在设计触摸支持时，请始终包括点击事件支持，并且永远不要假设任何设备都是独占的。

---

发现对 window.Touch 的测试在 android 上不起作用，但这确实：

function is_touch_device() {
  return !!('ontouchstart' in window);
}

见文章：What's the best way to detect a 'touch screen' device using JavaScript?

---

+1 同时执行 hover 和 click。另一种方法可能是使用 CSS 媒体查询并仅将某些样式用于较小的屏幕/移动设备，这些设备最有可能具有触摸/点击功能。因此，如果您有一些通过 CSS 的特定样式，并且从 jQuery 中检查这些元素的移动设备样式属性，您可以挂钩到它们以编写您的移动特定代码。

见这里：http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

---

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

无处不在！

---

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

使用 maxTouchPoints 和 msMaxTouchPoints 的原因：

Microsoft 已声明从 Internet Explorer 11 开始，可能会删除此属性 (msMaxTouchPoints) 的 Microsoft 供应商前缀版本，并建议改用 maxTouchPoints。

来源：http://ctrlq.org/code/19616-detect-touch-screen-javascript

---

我用：

if(jQuery.support.touch){
    alert('Touch enabled');
}

在 jQuery 移动版 1.0.1 中

---

谷歌浏览器似乎在这个上返回误报：

var isTouch = 'ontouchstart' in document.documentElement;

我想它与“模拟触摸事件”的能力有关（F12 -> 右下角的设置 -> “覆盖”选项卡 -> 最后一个复选框）。我知道默认情况下它是关闭的，但这就是我将结果更改与（用于在 Chrome 中工作的“in”方法）联系起来的原因。但是，据我测试，这似乎有效：

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

我在 typeof 为“对象”的状态下运行该代码的所有浏览器，但我更确定知道它是未定义的任何东西 :-)

在 IE7、IE8、IE9、IE10、Chrome 23.0.1271.64、Chrome for iPad 21.0.1180.80 和 iPad Safari 上测试。如果有人进行更多测试并分享结果，那就太酷了。

---

为我的一个网站写了这篇文章，可能是最简单的解决方案。特别是因为即使是 Modernizr 也可能在触摸检测上得到误报。

如果你使用 jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

或者只是纯JS...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

---

对于我的第一篇文章/评论：我们都知道“touchstart”是在点击之前触发的。我们还知道，当用户打开您的页面时，他或她会：1）移动鼠标 2）单击 3）触摸屏幕（用于滚动，或... :)）

让我们尝试一下：

//--> 开始：jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

//<-- 结束：jQuery

祝你今天过得愉快！

---

我已经测试了上面讨论中提到的以下代码

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

适用于 android Mozilla、chrome、Opera、android 默认浏览器和 iphone 上的 safari ......

对我来说似乎很可靠:)

---

一篇关于该主题的有用博客文章，从 Modernizr 源中链接到用于检测触摸事件。结论：不可能从 Javascript 可靠地检测触摸屏设备。

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

---

这对我有用：

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

---

如果您使用 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 移动设备。

Also see this SO question

---

在 jQuery Mobile 中，您可以简单地执行以下操作：

$.support.touch

不知道为什么这是无证的..但它是跨浏览器安全的（当前浏览器的最新 2 个版本）。

---

如前所述，设备可能同时支持鼠标和触摸输入。很多时候，问题不是“支持什么”而是“当前使用什么”。

对于这种情况，您可以简单地注册鼠标事件（包括悬停侦听器）和类似的触摸事件。

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript 应该根据用户输入自动调用正确的侦听器。因此，在触摸事件的情况下，onTouchStartCallback 将被触发，模拟您的悬停代码。

请注意，触摸可能会触发两种侦听器，触摸和鼠标。但是，触摸侦听器先运行，并且可以通过调用 event.preventDefault() 来阻止后续的鼠标侦听器触发。

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

进一步阅读here。

---

对于 iPad 开发，我正在使用：

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

然后我可以选择性地绑定到基于触摸的事件（例如 ontouchstart）或基于鼠标的事件（例如 onmousedown）。我还没有在安卓上测试过。

---