Questions sur les médias tactiles

Question

Quel est le moyen le plus sûr, en utilisant des requêtes de médias, de faire quelque chose qui ne se passe pas sur un périphérique tactile? S'il n'y a aucun moyen, suggérez-vous d'utiliser une solution javascript telle que !window.Touch ou modernizr?

Merci d'avance!

Answer 1

Il est en fait une propriété dans le CSS4 media query projet.

Le "pointeur" médias fonctionnalité est utilisée pour interroger à propos de la présence et de l' la précision d'un dispositif de pointage tel qu'une souris. Si un périphérique a plusieurs mécanismes d'entrée, il est recommandé que l'UA rapports de l' caractéristiques de la moins capable dispositif de pointage du primaire mécanismes d'entrée. Cette requête de média prend les valeurs suivantes:

‘none'
- Le mécanisme d'entrée de l'appareil ne comporte pas de dispositif de pointage.

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

‘fin'
- Le mécanisme d'entrée de l'appareil inclut un précis du périphérique de pointage.

Ce serait utilisée en tant que telle:

/* 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 aussi trouvé un billet dans le Chrome de projet lié à ce.

Compatibilité du navigateur peuvent être testés à Quirksmode. Ce sont mes résultats (22 janvier 2013):

• Chrome/Win: Fonctionne
• Chrome/iOS: Ne fonctionne pas
• Safari/iOS6: Ne fonctionne pas

Answer 2

Je conseille modernizr et à l'aide de ses médias fonctionnalités de requête.

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

Cependant, l'utilisation de CSS, il y a psedo classe comme, par exemple, dans firefox. Vous pouvez utiliser :-moz-système métrique(tactile). Mais ces fonctions ne sont pas disponibles pour tous les browswers.

Pour Apple, les appareils, vous pouvez simplement utiliser:

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

Spécialement pour l'Ipad

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

Mais, ces ne travaillent pas sur Android.

Modernizr donne la fonction de détection des capacités, et la détection de caractéristiques est un bon moyen de code, plutôt que de codage sur la base des navigateurs.

Style Touch Éléments

Moderniste ajoute des classes à la balise body pour cet objectif précis. Dans ce cas, touch et no-touch de sorte que vous pouvez le style de votre toucher les aspects liés par la préfixation de votre sélecteurs avec .toucher. par exemple, .touch .your-container. ^{Crédits: Ben Swinburne}

Answer 3

Le CSS solutions ne semblent pas être largement disponible dès la mi-2013. Au lieu de cela...

1. Nick Zakas explique que Modernizr applique no-touch classe CSS lorsque le navigateur ne supporte pas les toucher.

2. Ou de détecter en JavaScript avec un simple morceau de code permet de mettre en place votre propre Modernizr-comme solution:

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

   Ensuite, vous pouvez écrire votre code CSS:

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

Answer 4

Les types de support ne vous permettent pas de détecter les fonctionnalité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 des requêtes CSS ou multimédia, vous devrez recourir à JavaScript.

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

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