Determining Device Input Capabilities for Touch-Only Interfaces

Detecting whether a user is using a touch-only device is crucial for adapting the user interface of web applications accordingly. The current answers to this question provide methods to accomplish this using touch event capabilities. However, this approach is insufficient as it cannot distinguish between devices that have both mouse and touch input capabilities.

A more accurate solution is to utilize CSS4 media interaction features. These features allow developers to query the presence and accuracy of pointing devices, such as mice or touch screens. The following options are available:

@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device

@media (hover: hover) { ... } // Can hover
@media (hover: none) { ... } // Cannot hover

@media (any-hover: hover) { ... } // Any input device can hover
@media (any-hover: none) { ... } // No input device can hover

By incorporating these media queries into JavaScript, it becomes possible to determine the user's input capabilities:

if(window.matchMedia("(any-hover: none)").matches) {
    // Touch-only device
}

Additionally, it is important to consider that the lack of mouse input may also indicate the presence of a keyboard-only device. CSS4 media interaction features can effectively detect both types of input limitations.