检测到浏览器没有鼠标且仅限触摸

javascript html css touch mouse

2022-08-30 02:00:07

我正在开发一个Web应用程序（不是一个包含有趣文本页面的网站），它具有非常不同的触摸界面（单击时手指会隐藏屏幕）和鼠标（严重依赖悬停预览）。如何检测我的用户没有鼠标来向他展示正确的界面？我计划为同时具有鼠标和触摸功能（如某些笔记本电脑）的人留下一个开关。

浏览器中的触摸事件功能实际上并不意味着用户正在使用触摸设备（例如，Modernizr 不会削减它）。如果设备有鼠标，则正确回答问题的代码应返回 false，否则返回 true。对于具有鼠标和触摸功能的设备，它应该返回 false（不仅仅是触摸）

顺便说一句，我的触摸界面可能也适用于仅键盘设备，因此更多的是我想要检测的鼠标不足。

为了使需求更加清晰，以下是我想要实现的API：

// Level 1


// The current answers provide a way to do that.
hasTouch();

// Returns true if a mouse is expected.
// Note: as explained by the OP, this is not !hasTouch()
// I don't think we have this in the answers already, that why I offer a bounty
hasMouse();

// Level 2 (I don't think it's possible, but maybe I'm wrong, so why not asking)

// callback is called when the result of "hasTouch()" changes.
listenHasTouchChanges(callback);

// callback is called when the result of "hasMouse()" changes.
listenHasMouseChanges(callback);

答案 1

截至2018年，有一种良好而可靠的方法来检测浏览器是否具有鼠标（或类似的输入设备）：CSS4媒体交互功能现在几乎受到任何现代浏览器（IE 11和特殊移动浏览器除外）的支持。

W3C：

指针媒体功能用于查询指针设备（如鼠标）的存在和准确性。

请参阅以下选项：

    /* The primary input mechanism of the device includes a 
pointing device of limited accuracy. */
    @media (pointer: coarse) { ... }
    
    /* The primary input mechanism of the device 
includes an accurate pointing device. */
    @media (pointer: fine) { ... }
    
    /* The primary input mechanism of the 
device does not include a pointing device. */
    @media (pointer: none) { ... }

    /* Primary input mechanism system can 
       hover over elements with ease */
    @media (hover: hover) { ... }
    
    /* Primary input mechanism cannot hover 
       at all or cannot conveniently hover 
       (e.g., many mobile devices emulate hovering
       when the user performs an inconvenient long tap), 
       or there is no primary pointing input mechanism */
    @media (hover: none) { ... }
    
    /* One or more available input mechanism(s) 
       can hover over elements with ease */
    @media (any-hover: hover) { ... }
    
    
    /* One or more available input mechanism(s) cannot 
       hover (or there are no pointing input mechanisms) */
    @media (any-hover: none) { ... }

媒体查询也可以在 JS 中使用：

if(window.matchMedia("(any-hover: none)").matches) {
    // do something
}