Media queries pour écran tactile

Résolu
drspinoza Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Pour les connaisseurs de media queries et du développement responsive.
Je me demande comment faire pour que le média queries fonctionne uniquement sur écran tactile.
Je sais que je pourrais mettre un max-width, les écrans tactile étant essentielement des smartphones.
mais aujourd'hui avec les nombreuses tablettes et ordi tactile cela est devenu obsolète.

merci,

A voir également:

1 réponse

Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

Pour cibler uniquement les écrans tactiles tu peux utiliser javascript afin de déterminer si le terminal supporte l'événement TouchEvent.
On peut également utiliser Modernizr qui applique la classe css "touch" sur l'élément html si le terminal est tactile.
Plus d'info : https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript

Il est également possible d'utiliser PHP pour déterminer le terminal utilisé, un exemple parmi d'autres : http://mobiledetect.net/

Mais pourquoi ne pas appliquer les media queries sur les terminaux non tactiles ?

Bonne journée,
0
drspinoza Messages postés 51 Date d'inscription   Statut Membre Dernière intervention  
 
Parce-que qu'il n'y a pas de hover sur tactile je dois donc changer l'apparence de certaine chose.
Mais merci pour ta réponse , si je comprend je n'ai d'autre choix que de passer par un script, media queries ne prenant pas en compte ce genre d'attribut.

Bonne journée,
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Pour le moment les media queries ne permettent pas de détecter cette fonctionnalité, tu peux trouver les conditions possibles ici : https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#Pseudo-BNF_%28pour_ceux_qui_aiment_ce_genre_de_choses%29

Mais il semble que cette fonctionnalité soit prévue pour la prochaine version de css : https://drafts.csswg.org/mediaqueries/#pointer
0