检测触摸屏桌面答案

【问题标题】：detect touchscreen desktop检测触摸屏桌面
【发布时间】：2012-09-07 09:40:30
【问题描述】：

我的最终愿望是允许使用触摸屏桌面（没有鼠标或键盘的一体机）的用户在使用工具提示的网站上导航。使用鼠标，将鼠标悬停在工具提示上会打开它，工具提示包含可以单击的链接。使用触摸屏，没有悬停，只有“触摸”/点击。在这两种情况下，页面都将使用相同的浏览器显示在相同的操作系统上，一旦用户使用鼠标，另一次用户使用触摸屏。

所以我需要区分这两者：带鼠标的台式电脑和不带鼠标的触摸屏台式电脑。 Modernizr 触摸测试 (http://modernizr.github.com/Modernizr/touch.html) 在触摸屏桌面 (http://shop.lenovo.com/us/landing_pages/thinkcentre/2010/m90z) 上完全失败。嗅探 UA 或浏览器也不起作用。

（经过大量搜索后，所有检测都试图区分不同版本的手机或平板电脑、浏览器、UA...而不是使用相同浏览器在相同操作系统上运行的桌面触摸屏。）

有什么想法吗？

【问题讨论】：

撞车？对我来说仍然是一个问题......

标签： desktop detection touchscreen

【解决方案1】：

将事件侦听器touchstart 和mousemove 添加到您的页面，然后等待用户开始与您的页面交互。如果第一个事件是mousemove，那么用户是用鼠标操作的，所以很可能是桌面，否则就是触摸屏。

$(document).on('touchstart.desktopDetect mousemove.desktopDetect', function(ev) {
    window.IS_TOUCHSCREEN_DEVICE = (ev.type == 'touchstart');
    $(document).off('.desktopDetect');
});

在此处查看工作示例： https://jsfiddle.net/evpozdniakov/uvb51cnm/embedded/result/

【讨论】：