用 Javascript 检测触摸屏设备

小开

最佳答案

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

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

小开

对于 iPad 的开发，我使用:

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

然后我可以选择性地绑定到基于触摸的事件(例如 ontouch 开始)或基于鼠标的事件(例如 onmousedown)。我还没在机器人上测试过。

小开

var isTouchDevice = 'ontouchstart' in document.documentElement;

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

小开

我用:

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

在 jQuery mobile 1.0.1中

小开

发现测试窗口。触摸不能在机器人上工作，但这个可以:

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

详见: 使用 JavaScript 检测触摸屏设备的最佳方法是什么？

小开

这对我有用:

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

小开

谷歌 Chrome 似乎在这一点上给出了错误的肯定:

var isTouch = 'ontouchstart' in document.documentElement;

我认为这和它“模拟触摸事件”的能力有关(F12-> 右下角的设置-> “覆盖”选项卡-> 最后一个复选框)。我知道它在默认情况下是关闭的，但这就是我将结果更改连接到的东西(在 Chrome 中使用的“ in”方法)。然而，就我所测试的而言，这似乎是有效的:

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

所有的浏览器，我已经运行的状态代码的类型是“对象”，但我觉得更肯定的是，知道它是什么，但未定义: -)

在 IE7，IE8，IE9，IE10，Chrome 23.0.1271.64，Chrome for iPad 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');
}
});

或者只是纯洁的 JS。

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

小开

如果您使用现代化，那么就很容易像前面提到的那样使用 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
}

如果你不使用现代化，你可以简单地用 ('ontouchstart' in document.documentElement)代替上面的 Modernizr.touch函数

还要注意，测试用户代理 iemobile将为您提供比 Windows Phone更广泛的检测到的 Microsoft 移动设备。

也请看这个 SO 问题

小开

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

无处不在！

小开

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

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

适用于安卓 Mozilla，chrome，Opera，安卓默认浏览器和 iphone Safari..。都是正面的。

对我来说似乎很可靠:)

小开

一个关于这个主题的有用的博客帖子，从现代化源代码中链接来检测触摸事件。结论: 从 Javascript 无法可靠地检测触摸屏设备。

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

小开

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

与 msMaxTouchPoint 一起使用 maxTouchPoint 的原因:

微软表示从 Internet Explorer 11开始, 此属性的 Microsoft 供应商前缀版本(msMaxTouchPoint) 可以删除，并建议使用 maxTouchPoint 代替。

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

小开

在 jQuery Mobile 中，你只需要做:

$.support.touch

不知道为什么这是如此没有文件... 但它是跨浏览器安全的(最新的2个版本的当前浏览器)。

小开

对于我的第一篇文章/评论: 我们都知道“触摸启动”在点击之前被触发。我们还知道，当用户打开您的网页，他或她将: 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

祝你愉快！

小开

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

在这种情况下，您可以简单地注册鼠标事件(包括悬停侦听器)和触摸事件。

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...
}

进一步阅读给你。