问题

我目前使用以下测试(取自Modernizr)来检测触摸支持:

 function is_touch_device() {
    var bool;
    if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
        bool = true;
    } else {
        injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),mod,')','{#modernizr{top:9px;position:absolute}}'].join(''), function(node) {
            bool = node.offsetTop === 9;
        });
    }
    return bool;
}
 

但有些设备是触摸和鼠标驱动的,所以我想要一个单独的函数来检测设备是否有鼠标支持.这样做的好方法是什么?

最终我的意图是能够做到这一点:

 if(is_touch_device())

if(has_mouse_support())

if(is_touch_device() && has_mouse_support())
 

  最佳答案

一个CSS媒体就是这样!

您可以通过获取pointer CSS媒体功能的值来检查一些设备是否有鼠标:

 if (matchMedia('(pointer:fine)').matches) {
  // Device has a mouse
}
 

因为它是CSS,你甚至不需要使用JavaScript:

 @media (pointer: fine) {
  /* Rules for devices with mouse here */
}
 

  相同标签的其他问题

javascriptjquery