实际的答案似乎是一个考虑上下文的答案:

1)公共站点(无法登录) 编写UI代码以同时使用这两个选项。

2)登录站点 捕获登录表单上是否发生了鼠标移动，并将其保存到隐藏的输入中。该值与登录凭据一起传递，并添加到用户的会话中，因此可以在会话期间使用它。

Jquery只添加到登录页面:

$('#istouch').val(1); // <-- value will be submitted with login form

if (window.addEventListener) {
    window.addEventListener('mousemove', function mouseMoveListener(){
        // Update hidden input value to false, and stop listening
        $('#istouch').val(0); 
        window.removeEventListener('mousemove', mouseMoveListener);
    });
} 

(@Dave Burt +1， @Martin Lantzsch +1)

这个即使在Windows Surface平板电脑上也能很好地工作!!

function detectTouchSupport {
msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture,
touchSupport = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch &&     document instanceof DocumentTouch);
if(touchSupport) {
    $("html").addClass("ci_touch");
}
else {
    $("html").addClass("ci_no_touch");
}
}

所以关于检测触摸/非触摸设备存在很大的争议。窗口平板电脑的数量和尺寸都在增加，这给我们网页开发者带来了另一个难题。

我已经使用并测试了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上(出于某种原因)出现了问题，但媒体查询上面的行是有效的。

谢谢

由于Modernizr无法检测Windows Phone 8/WinRT上的IE10，一个简单的跨浏览器解决方案是:

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

你只需要检查一次，因为设备不会突然支持或不支持触摸，所以只需将它存储在一个变量中，这样你就可以更有效地多次使用它。

我喜欢这个:

function isTouchDevice(){
    return window.ontouchstart !== undefined;
}

alert(isTouchDevice());

试图检测触控的最大“陷阱”是同时支持触控和触控板/鼠标的混合设备。即使你能够正确地检测用户的设备是否支持触摸，你真正需要做的是检测用户当前使用的输入设备。这里有一份关于这个挑战的详细报告和可能的解决方案。

基本上，判断用户是触摸屏幕还是使用鼠标/触控板的方法是在页面上注册touchstart和mouseover事件:

document.addEventListener('touchstart', functionref, false) // on user tap, "touchstart" fires first
document.addEventListener('mouseover', functionref, false) // followed by mouse event, ie: "mouseover"

触摸动作会触发这两个事件，尽管前者(touchstart)在大多数设备上总是先触发。因此，依靠这个可预测的事件序列，您可以创建一种机制，动态地向文档根添加或删除一个can-touch类，以反映当前用户在文档上的输入类型:

;(function(){
    var isTouch = false //var to indicate current input type (is touch versus no touch) 
    var isTouchTimer 
    var curRootClass = '' //var indicating current document root class ("can-touch" or "")
     
    function addtouchclass(e){
        clearTimeout(isTouchTimer)
        isTouch = true
        if (curRootClass != 'can-touch'){ //add "can-touch' class if it's not already present
            curRootClass = 'can-touch'
            document.documentElement.classList.add(curRootClass)
        }
        isTouchTimer = setTimeout(function(){isTouch = false}, 500) //maintain "istouch" state for 500ms so removetouchclass doesn't get fired immediately following a touch event
    }
     
    function removetouchclass(e){
        if (!isTouch && curRootClass == 'can-touch'){ //remove 'can-touch' class if not triggered by a touch event and class is present
            isTouch = false
            curRootClass = ''
            document.documentElement.classList.remove('can-touch')
        }
    }
     
    document.addEventListener('touchstart', addtouchclass, false) //this event only gets called when input type is touch
    document.addEventListener('mouseover', removetouchclass, false) //this event gets called when input type is everything from touch to mouse/ trackpad
})();

详情请点击这里。