Comment pouvons-nous déterminer avec précision les appareils tactiles dans les applications Web ?

Détermination des capacités de saisie de l'appareil pour les interfaces tactiles uniquement

Détecter si un utilisateur utilise un appareil tactile uniquement est crucial pour adapter l'utilisateur interface des applications Web en conséquence. Les réponses actuelles à cette question fournissent des méthodes pour y parvenir en utilisant les capacités d'événements tactiles. Cependant, cette approche est insuffisante car elle ne peut pas faire la distinction entre les appareils dotés à la fois de capacités de saisie avec la souris et par contact.

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

<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>

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

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

De plus, il est important de considérer que l’absence de saisie avec la souris peut également indiquer la présence d’un périphérique doté uniquement d’un clavier. Les fonctionnalités d'interaction multimédia CSS4 peuvent détecter efficacement les deux types de limitations de saisie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!