使用Javascript检测触摸屏设备

Question

在Javascript/jQuery中,如何检测客户端设备是否有鼠标？

当用户将鼠标悬停在某个项目上时,我有一个可以向上滑动一个小信息面板的网站.我正在使用jQuery.hoverIntent来检测悬停,但这显然不适用于iPhone/iPad/Android等触摸屏设备.所以在那些设备上,我想恢复点击以显示信息面板.

Answer 1

var isTouchDevice = 'ontouchstart' in document.documentElement;

注意:仅仅因为设备支持触摸事件并不一定意味着它只是一个触摸屏设备.许多设备(例如我的华硕Zenbook)都支持点击和触摸事件,即使它们没有任何实际的触摸输入机制.在设计触摸支持时,始终包括点击事件支持,并且永远不要假设任何设备只是一个或另一个.

Answer 2

找到测试window.Touch在Android上不起作用,但这样做:

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

请参阅文章:使用JavaScript检测"触摸屏"设备的最佳方法是什么？

Answer 3

+1做hover和click两者兼而有之.另一种方式可能是使用CSS媒体查询,并仅将一些样式用于较小的屏幕/移动设备,这些设备最有可能具有触摸/点击功能.因此,如果你通过CSS有一些特定的样式,并且从jQuery中检查那些元素,你可以将它们挂钩到移动设备样式属性中,以便为您编写特定于移动设备的代码.

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

Answer 4

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

使用maxTouchPoints和msMaxTouchPoints的原因:

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

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

Answer 5

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

适用于每个地方!!