我编写了一个jQuery插件,可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件,它适用于iOS, Android等,但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗?
我编写了一个jQuery插件,可以在桌面和移动设备上使用。我想知道是否有一种方法可以用JavaScript来检测设备是否具有触摸屏功能。我使用jquery-mobile.js来检测触摸屏事件,它适用于iOS, Android等,但我也想根据用户的设备是否有触摸屏来编写条件语句。
这可能吗?
当前回答
如果你测试document.documentElement中支持touchstart,这就很简单了
var x = 'touchstart'在document.documentElement; console.log (x) //如果支持返回true //否则返回false
其他回答
使用上面所有的注释,我已经组装了下面的代码,是为我的需要工作:
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
我在iPad、Android(浏览器和Chrome)、黑莓Playbook、iPhone 4s、Windows Phone 8、IE 10、IE 8、IE 10(带触摸屏的Windows 8)、Opera、Chrome和Firefox上进行了测试。
它目前在Windows Phone 7上无法运行,我还没有找到针对该浏览器的解决方案。
希望有人觉得这有用。
所有浏览器支持,除了Firefox桌面始终为TRUE,因为Firefox桌面支持响应式设计的开发人员,即使你点击触摸按钮或不!
我希望Mozilla在下一个版本中解决这个问题。
我用的是火狐28桌面版。
function isTouch()
{
return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}
您可以使用以下代码:
function isTouchDevice() {
var el = document.createElement('div');
el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
return typeof el.ongesturestart === "function";
}
来源:detection touch-based browsing and @mplungjan post。
上述解决方案是基于检测事件的支持,没有浏览器嗅探文章。
您可以在下面的测试页面检查结果。
请注意,上面的代码只测试浏览器是否支持触摸,而不是设备本身。所以如果你的笔记本电脑有触摸屏,你的浏览器可能不支持触摸事件。最新的Chrome浏览器支持触摸事件,但其他浏览器可能不支持。
你也可以试试:
if (document.documentElement.ontouchmove) {
// ...
}
但它可能不适用于iPhone设备。
虽然它只是alpha版本,但jquery移动框架值得一试。它将在移动浏览器中规范化这些类型的事件。也许可以看看他们在做什么。我假设jquery-mobile.js与这个框架有所不同。
关于如何在Javascript中检测页面是否显示在触摸屏设备上,我也遇到了很多困难。 在我看来,到目前为止,还没有真正的选项可以正确地检测这个选项。 浏览器要么报告桌面机器上的触摸事件(因为操作系统可能已经准备好触摸了),要么某些解决方案不能在所有移动设备上工作。
最后,我意识到我从一开始就采取了错误的方法: 如果我的页面在触摸和非触摸设备上看起来相似,我可能根本不需要担心检测属性: 我的方案是禁用触摸设备上的按钮上的工具提示,因为它们会导致双击,而我希望通过一次点击来激活按钮。
我的解决方案是重构视图,这样按钮上就不需要工具提示了,最后我也不需要用Javascript的方法来检测触摸设备了,因为这些方法都有自己的缺点。