Question

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

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

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

有什么想法吗？

Answer 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/

检测触摸屏桌面

1 个答案: