Media queries pour écran tactile [Résolu/Fermé]

Signaler
Messages postés
51
Date d'inscription
dimanche 25 octobre 2015
Statut
Membre
Dernière intervention
9 mai 2016
-
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
-
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,

1 réponse

Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
432
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,
Messages postés
51
Date d'inscription
dimanche 25 octobre 2015
Statut
Membre
Dernière intervention
9 mai 2016

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,
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
432
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