Comment puis-je détecter les écrans tactiles à l'aide de CSS et JavaScript ?

Détection des écrans tactiles avec les requêtes multimédias

Dans le domaine de la conception Web réactive, il est essentiel d'adapter le contenu aux différents périphériques d'entrée. Déterminer si un appareil est un écran tactile peut améliorer l'expérience utilisateur avec les ajustements appropriés.

Solution de requête multimédia

Le brouillon de requête multimédia CSS4 fournit une fonctionnalité spécifiquement à cet effet : 'aiguille'. Il propose trois valeurs :

• aucun :Aucun dispositif de pointage
• coarse :Dispositif de pointage de faible précision
• bien : Pointage précis appareil

Utilisation :

@media (pointer:coarse) {
    /* Adjust styles for low-accuracy pointing devices */
}

Compatibilité :

À compter du 22 janvier 2013, compatibilité avec les navigateurs est la suivante :

• Chrome/Win : Pris en charge
• Chrome/iOS : non pris en charge
• Safari/iOS6 : non pris en charge

Alternatives JavaScript :

Pendant que la requête multimédia « pointeur » est limitée dans la prise en charge du navigateur, propose des solutions JavaScript alternatives :

• !window.Touch : Détecte la saisie tactile
• Modernizr : Une bibliothèque qui offre un large éventail de fonctionnalités d'appareil, y compris écran tactile détection

Conclusion :

L'utilisation de la requête multimédia « pointeur » lorsqu'elle est disponible est la méthode la plus précise pour détecter les écrans tactiles. Cependant, pour les appareils sans support, des solutions JavaScript telles que !window.Touch peuvent être utilisées efficacement.

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!