我编写了一个jQuery插件,可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件,它适用于iOS, Android等,但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗?
我编写了一个jQuery插件,可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件,它适用于iOS, Android等,但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗?
当前回答
不,不可能。给出的优秀答案永远都是片面的,因为任何给定的方法都会产生假阳性和假阴性。由于操作系统api的原因,甚至浏览器也不总是知道是否存在触摸屏,而且在浏览器会话期间,这一事实可能会发生变化,特别是使用kvm类型的安排。
详见这篇优秀的文章:
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
这篇文章建议你重新考虑那些让你想要检测触摸屏的假设,它们可能是错误的。(我检查了我自己的应用程序,我的假设确实是错误的!)
文章总结道:
对于布局,假设每个人都有触摸屏。鼠标用户可以使用 大型UI控件比触摸用户使用小控件容易得多 的人。悬浮状态也是如此。 对于事件和交互,假设任何人都有触摸屏。 实现键盘、鼠标和触摸交互, 确保互不妨碍。
其他回答
更新:在将整个功能检测库拉入你的项目之前,请阅读下面blmstr的回答。检测实际的触摸支持更加复杂,Modernizr只涵盖了一个基本的用例。
Modernizr是一种很棒的轻量级方法,可以在任何网站上进行各种特征检测。
它只是为每个特性在html元素中添加类。
然后你可以在CSS和JS中轻松地瞄准这些功能。例如:
html.touch div {
width: 480px;
}
html.no-touch div {
width: auto;
}
和Javascript (jQuery示例):
$('html.touch #popup').hide();
工作小提琴
我是这样做到的;
function isTouchDevice(){
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
if(isTouchDevice()===true) {
alert('Touch Device'); //your logic for touch device
}
else {
alert('Not a Touch Device'); //your logic for non touch device
}
所以关于检测触摸/非触摸设备存在很大的争议。窗口平板电脑的数量和尺寸都在增加,这给我们网页开发者带来了另一个难题。
我已经使用并测试了blmstr的菜单答案。菜单的工作方式是这样的:当页面加载时,脚本检测这是一个触摸或非触摸设备。基于此,菜单将在悬停(非触摸)或点击/点击(触摸)时工作。
在大多数情况下,blmstr的脚本似乎工作得很好(特别是2018年的那个)。但仍然有一种设备,当它不是触摸时,它会被检测为触摸,反之亦然。
出于这个原因,我做了一些挖掘,多亏了这篇文章,我从blmstr的第4个脚本中替换了几行:
函数is_touch_device4() { If ("ontouchstart" in window) 返回true; 如果窗口。DocumentTouch的文档实例) 返回true; 返回窗口。matchMedia("(指针:粗)").matches; } alert('Is touch device: '+is_touch_device4()); console.log('Is touch device: '+is_touch_device4());
由于封锁,有有限的触摸设备来测试这一个,但到目前为止,上面的工作很好。
如果任何人有桌面触摸设备(如平板电脑)可以确认脚本是否工作正常,我将不胜感激。
现在在支持指针方面:粗媒体查询似乎是支持的。我保留了上面的行,因为我在移动firefox上(出于某种原因)出现了问题,但媒体查询上面的行是有效的。
谢谢
你可以安装modernizer并使用一个简单的触摸事件。这是非常有效的,工作在每一个设备上,我已经测试了它包括窗户表面!
我已经创建了一个jsFiddle
function isTouchDevice(){
if(Modernizr.hasEvent('touchstart') || navigator.userAgent.search(/Touch/i) != -1){
alert("is touch");
return true;
}else{
alert("is not touch");
return false;
}
}
看起来Chrome 24现在支持触摸事件了,可能是Windows 8。所以这里发布的代码不再有效。而不是试图检测触摸是否支持浏览器,我现在绑定触摸和点击事件,并确保只有一个被调用:
myCustomBind = function(controlName, callback) {
$(controlName).bind('touchend click', function(e) {
e.stopPropagation();
e.preventDefault();
callback.call();
});
};
然后调用它:
myCustomBind('#mnuRealtime', function () { ... });
希望这能有所帮助!