Comment puis-je détecter de manière fiable les appareils sans écran tactile à l'aide de Media Queries ou de JavaScript ?

Identification des appareils sans écran tactile avec des requêtes multimédias

Introduction :

Déterminer si un appareil est compatible avec un écran tactile est crucial pour améliorer l’expérience utilisateur dans le développement Web. Les requêtes multimédias constituent un moyen pratique d’adapter le contenu et les fonctionnalités en fonction des capacités de l’appareil. Cet article examine la technique de requête multimédia la plus sûre pour détecter les appareils sans écran tactile et explore des solutions alternatives.

Solution de requête multimédia :

Le projet de requête multimédia CSS4 présente la solution innovante Fonction « pointeur » pour se renseigner sur la disponibilité et la précision d'un périphérique de pointage, tel qu'une souris. Il propose trois valeurs possibles :

• aucun : Indique l'absence de dispositif de pointage.
• coarse : Représente un appareil doté d'un dispositif de pointage d'une précision limitée.
• fine : Désigne un pointage précis appareil.

Grâce à cette fonctionnalité, vous pouvez implémenter une requête multimédia comme celle-ci :

@media (pointer:coarse) {
    /* Code to adjust interface for coarse pointing devices */
}

Compatibilité des navigateurs :

À partir de Janvier 2013, la requête multimédia « pointeur » était prise en charge dans Chrome sous Windows, mais pas sur iOS ni Safari sur iOS. 6.

Solution alternative : JavaScript

Si les requêtes multimédias ne sont pas prises en charge, vous pouvez envisager des solutions JavaScript telles que les suivantes :

if (!window.Touch) {
    // Code to handle non-touchscreen scenarios
}

Conclusion :

La requête multimédia « pointeur » dans CSS4 fournit un moyen robuste de détecter appareils non tactiles. Cependant, la compatibilité du navigateur doit être prise en compte. Comme alternative, des solutions JavaScript telles que « !window.Touch » peuvent être utilisées pour obtenir le même résultat.

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!