How Can We Accurately Determine Touch-Only Devices in Web Applications?

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:

<code class="css">@media (pointer: coarse) { ... } // Limited accuracy pointing device
@media (pointer: fine) { ... } // Accurate pointing device
@media (pointer: none) { ... } // No pointing device</code>

<code class="css">@media (hover: hover) { ... } // Can hover
@media (hover: none) { ... } // Cannot hover</code>

<code class="css">@media (any-hover: hover) { ... } // Any input device can hover
@media (any-hover: none) { ... } // No input device can hover</code>

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

<code class="js">if(window.matchMedia("(any-hover: none)").matches) {
    // Touch-only device
}</code>

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.

The above is the detailed content of How Can We Accurately Determine Touch-Only Devices in Web Applications?. For more information, please follow other related articles on the PHP Chinese website!