Requête multimédia pour détecter si l'appareil est un écran tactile

Quel est le moyen le plus sûr, à l'aide de requêtes multimédias, de faire en sorte que quelque chose se produise lorsque vous n'êtes pas sur un appareil à écran tactile? S'il n'y a aucun moyen, suggérez-vous d'utiliser une solution JavaScript telle que !window.Touchou Modernizr?

Je suggérerais d'utiliser modernizr et d'utiliser ses fonctionnalités de requête multimédia.

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

Cependant, en utilisant CSS, il existe des pseudo-classes comme, par exemple, dans Firefox. Vous pouvez utiliser : -moz-system-metric (tactile) . Mais ces fonctionnalités ne sont pas disponibles pour tous les navigateurs.

Pour les appareils Apple , vous pouvez utiliser simplement:

if(window.TouchEvent) {
   //.....
}

Surtout pour Ipad:

if(window.Touch) {
    //....
}

Mais, ceux - ci ne fonctionnent pas sur Android .

Modernizr offre des capacités de détection de fonctionnalités, et la détection des fonctionnalités est un bon moyen de coder, plutôt que de coder sur la base des navigateurs.

Styling des éléments tactiles

Modernizer ajoute des classes à la balise HTML dans ce but précis. Dans ce cas, touchet no-touchainsi vous pouvez styliser vos aspects liés au toucher en préfixant vos sélecteurs avec .touch. par exemple .touch .your-container. ^{Crédits: Ben Swinburne}

Il existe en fait une propriété pour cela dans le brouillon de requête multimédia CSS4 .

La fonction multimédia "pointeur" est utilisée pour interroger la présence et la précision d'un périphérique de pointage tel qu'une souris. Si un périphérique possède plusieurs mécanismes d'entrée, il est recommandé que l'UA indique les caractéristiques du périphérique de pointage le moins capable des mécanismes d'entrée principaux. Cette requête multimédia prend les valeurs suivantes:

'aucun'
- Le mécanisme d'entrée du périphérique n'inclut pas de périphérique de pointage.

«grossier»
- Le mécanisme d'entrée de l'appareil comprend un dispositif de pointage d'une précision limitée.

'fine'
- Le mécanisme d'entrée de l'appareil comprend un dispositif de pointage précis.

Cela serait utilisé comme tel:

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

J'ai également trouvé un ticket dans le projet Chromium lié à cela.

La compatibilité du navigateur peut être testée à Quirksmode . Voici mes résultats (22 janvier 2013):

• Chrome / Win: fonctionne
• Chrome / iOS: ne fonctionne pas
• Safari / iOS6: ne fonctionne pas

Les solutions CSS ne semblent pas être largement disponibles à la mi-2013. Au lieu...

1. Nicholas Zakas explique que Modernizr applique une no-touchclasse CSS lorsque le navigateur ne prend pas en charge le toucher.

2. Ou détectez en JavaScript avec un simple morceau de code, vous permettant de mettre en œuvre votre propre solution de type Modernizr:

   <script>
       document.documentElement.className += 
       (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
   </script>

   Ensuite, vous pouvez écrire votre CSS comme suit:

   .no-touch .myClass {
       ...
   }
   .touch .myClass {
       ...
   }

Les types de support ne vous permettent pas de détecter les capacités tactiles dans le cadre de la norme:

http://www.w3.org/TR/css3-mediaqueries/

Donc, il n'y a aucun moyen de le faire de manière cohérente via CSS ou des requêtes multimédias, vous devrez recourir à JavaScript.

Pas besoin d'utiliser Modernizr, vous pouvez simplement utiliser du JavaScript simple:

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("touch is enabled!");
</script>

En 2017, la requête multimédia CSS de la deuxième réponse ne fonctionne toujours pas sur Firefox. J'ai trouvé une solution pour ça: -moz-touch-enabled

Alors, voici la requête multimédia multi-navigateurs:

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    .something {
        its: working;
    }
}

Il y a en fait une requête média pour cela:

@media (hover: none) { … }

En dehors de Firefox, il est assez bien pris en charge . Safari et Chrome étant les navigateurs les plus courants sur les appareils mobiles, cela pourrait suffire jusqu'à une plus grande adoption.

Cela fonctionnera. Si ça ne me fait pas savoir

@media (hover: none) and (pointer: coarse) {
    /* Touch screen device style goes here */
}

edit: le survol à la demande n'est plus pris en charge

Cette solution fonctionnera jusqu'à ce que CSS4 soit globalement pris en charge par tous les navigateurs. Quand ce jour viendra, utilisez simplement CSS4. mais jusque-là, cela fonctionne pour les navigateurs actuels.

browser-util.js

export const isMobile = {
  android: () => navigator.userAgent.match(/Android/i),
  blackberry: () => navigator.userAgent.match(/BlackBerry/i),
  ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
  opera: () => navigator.userAgent.match(/Opera Mini/i),
  windows: () => navigator.userAgent.match(/IEMobile/i),
  any: () => (isMobile.android() || isMobile.blackberry() || 
  isMobile.ios() || isMobile.opera() || isMobile.windows())
};

en charge:

ancienne façon:

isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;

nouvelle façon:

isMobile.any() ? document.body.classList.add('is-touch') : null;

Le code ci-dessus ajoutera la classe "is-touch" à l'étiquette corporelle si l'appareil dispose d'un écran tactile. Maintenant, n'importe quel emplacement dans votre application Web où vous auriez un css pour: survolez vous pouvez appelerbody:not(.is-touch) the_rest_of_my_css:hover

par exemple:

button:hover

devient:

body:not(.is-touch) button:hover

Cette solution évite d'utiliser modernizer car la lib modernizer est une très grande bibliothèque. Si tout ce que vous essayez de faire est de détecter les écrans tactiles, ce sera mieux lorsque la taille de la source compilée finale est une exigence.

ajouter un écran tactile de classe au corps en utilisant JS ou jQuery

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }

J'ai pu résoudre ce problème en utilisant ceci

@media (hover:none), (hover:on-demand) { 
Your class or ID{
attributes
}    
}