Déterminer les capacités d'entrée du périphérique pour les interfaces tactiles uniquement

détecter si un utilisateur utilise un périphérique tactile uniquement pour adapter l'interface utilisateur des applications Web en conséquence. Les réponses actuelles à cette question fournissent des méthodes pour y parvenir en utilisant des capacités d'événements tactiles. Cependant, cette approche est insuffisante car elle ne peut pas distinguer entre les appareils qui ont des capacités d'entrée de souris et tactile.

Une solution plus précise consiste à utiliser des fonctionnalités d'interaction multimédia CSS4. Ces fonctionnalités permettent aux développeurs d'interroger la présence et la précision des dispositifs de pointage, tels que des souris ou des écrans tactiles. Les options suivantes sont disponibles:

@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

en incorporant ces requêtes multimédias dans JavaScript, il devient possible de déterminer les capacités de saisie de l'utilisateur:

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

De plus, il est important de considérer que le manque d'entrée de la souris peut également indiquer la présence d'un périphérique uniquement au clavier. Les fonctionnalités d'interaction des médias CSS4 peuvent détecter efficacement les deux types de limitations d'entrée.