Media queries pour écran tactile

Résolu/Fermé
drspinoza Messages postés 51 Date d'inscription dimanche 25 octobre 2015 Statut Membre Dernière intervention 9 mai 2016 - 9 mai 2016 à 05:05
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 10 mai 2016 à 09:01
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 lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
9 mai 2016 à 11:14
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 dimanche 25 octobre 2015 Statut Membre Dernière intervention 9 mai 2016
9 mai 2016 à 17:32
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 lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
10 mai 2016 à 09:01
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