用Javascript检测触摸屏设备

+做一件事 hover 和 click 两者都有。另一种方法是使用CSS媒体查询,并且只对较小的屏幕/移动设备使用一些样式,这些设备最有可能具有触摸/点击功能。因此,如果您通过CSS有一些特定的样式,并且从jQuery中检查这些元素的移动设备样式属性,那么您可以将它们挂接起来编写特定于移动设备的代码。

http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

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?

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

将maxTouchPoints与msMaxTouchPoints一起使用的原因:

微软已经声明,从InternetExplorer11开始, 此属性的Microsoft供应商前缀版本(msMaxTouchPoints)

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

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

我使用:

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

在jQuery mobile 1.0.1中

谷歌Chrome似乎在这一点上返回了误报:

var isTouch = 'ontouchstart' in document.documentElement;

不过,就我所测试的情况来看,这似乎是可行的:

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

我运行过的所有浏览器 是“对象”,但我更确定地知道它是什么,但没有定义:-)

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

如果您使用的是jQuery

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

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

对于我的第一篇文章/评论: 我们都知道“touchstart”是在单击之前触发的。 1) 移动鼠标 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);
 }

都是肯定的。。。

一篇关于这个主题的有用的博客文章,链接到Modernizer源代码中,用于检测触摸事件。结论:无法从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 如前所述。

但是,我更喜欢使用 现代化触摸 和用户代理测试,只是为了安全。

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
    }

如果你不使用现代化,你可以简单地替换 现代化触摸 ('ontouchstart' in document.documentElement)

还要注意,测试用户代理 iemobile Windows Phone .

Also see this SO question

在jQuery Mobile中,您只需执行以下操作:

$.support.touch

不知道为什么这么无证。。但它是crossbrowser安全的(当前浏览器的最新两个版本)。

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

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