Comment puis-je détecter les appareils sans écran tactile à l'aide de requêtes multimédia CSS ?

Détection des appareils non tactiles avec des requêtes multimédias

Les requêtes multimédias CSS offrent un moyen pratique d'adapter le style du site Web en fonction de diverses caractéristiques de l'appareil. Bien que déterminer si un appareil est à écran tactile ne soit pas directement pris en charge par les requêtes multimédias, il existe une fonctionnalité multimédia émergente qui résout ce problème.

Fonctionnalité multimédia « pointeur » CSS4

Le projet de requête multimédia CSS4 introduit la fonction multimédia « pointeur », qui interroge la présence et l'exactitude d'un périphérique de pointage sur un appareil. Cette fonctionnalité prend les valeurs suivantes :

• 'none' : aucun dispositif de pointage n'est disponible.
• 'coarse' : A un dispositif de pointage avec une précision limitée est disponible.
• 'fine' : Un dispositif de pointage très précis est disponible.

Utilisation de la fonctionnalité multimédia « pointeur »

La fonctionnalité multimédia « pointeur » peut être utilisée comme suit pour cibler des appareils sans écran tactile :

@media (pointer:coarse) {
    /* CSS styles for non-touchscreen devices */
}

Compatibilité des navigateurs

La fonctionnalité multimédia « pointeur » est actuellement prise en charge dans certains navigateurs, mais la compatibilité varie. Pour les dernières informations sur la compatibilité des navigateurs, reportez-vous à Quirksmode.

Solution JavaScript alternative

Si un style spécifique à l'appareil ne peut pas être obtenu à l'aide de la fonctionnalité multimédia « pointeur », envisagez d'utiliser une solution JavaScript. Les approches courantes incluent :

• !window.Touch : détecte l'absence d'écran tactile.
• Modernizr : fournit un ensemble complet de outils de détection de fonctionnalités, y compris l'écran tactile détection.

Conclusion

La fonctionnalité multimédia « pointeur » offre un moyen pratique de détecter les appareils non tactiles dans les requêtes multimédias CSS. Cependant, il est encore en développement et sa prise en charge par les navigateurs est limitée. Pour des solutions alternatives basées sur JavaScript, pensez à !window.Touch ou Modernizr.

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!