Optimiser le site web pour les appareils tactiles

Question

Sur une touche de l'appareil comme iPhone/iPad/Android, il peut être difficile de frapper un petit bouton avec votre doigt. Il n'y a pas de croix-navigateur de façon à détecter les périphériques tactiles avec les CSS media queries, que je sache. J'ai donc vérifier si le navigateur supporte javascript événements tactiles. Jusqu'à maintenant, les autres navigateurs n'ont pas pris en charge, mais les dernières versions de Google Chrome dev canal activé les événements tactiles (même pour les non touch). Et je soupçonne que d'autres éditeurs de navigateurs qui va suivre, depuis les ordinateurs portables avec des écrans tactiles sont à venir. Mise à jour: C'était un bug dans Chrome, donc maintenant le JavaScript de détection fonctionne à nouveau.

C'est le test que j'ai utiliser:

function isTouchDevice() {
    return "ontouchstart" in window;
}

Le problème, c'est que ce ne teste que si le navigateur prend en charge les événements tactiles, pas de l'appareil.

Personne ne sait de Les Corriger[tm] façon de donner touch meilleure expérience utilisateur? Autres que le sniffing de l'agent utilisateur.

Mozilla a une requête de support pour les périphériques tactiles. Mais je n'ai pas vu quelque chose comme ça dans n'importe quel autre navigateur: https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

Mise à jour: je veux éviter d'utiliser une page séparée/site mobile/les appareils tactiles. La solution est d'en détecter les périphériques tactiles avec la détection d'objets ou similaire à partir de JavaScript, ou inclure une touche personnalisée-CSS sans user agent sniffing! La principale raison que j'ai demandé, est de faire en sorte qu'il n'est pas possible aujourd'hui, avant que je contact le css3 groupe de travail. Donc merci de ne pas répondre si vous ne pouvez pas suivre les exigences de la question ;)

Answer 1

Il me semble que vous voulez avoir un écran tactile convivial option, pour couvrir les scénarios suivants:

1. iPhone de dispositifs comme: taille de l'écran, touchez seulement
2. Les petits écrans, pas de touch (vous n'avez pas parlé de cette technique)
3. De grands écrans, pas de touche (c'est à dire les ordinateurs classiques)
4. L'écran tactile activé écrans de grande taille tels que les iPad, les ordinateurs portables/pc avec des écrans tactiles.

Pour le cas 1 et 2, vous aurez probablement besoin d'un site ou d'un fichier CSS qui élimine beaucoup de contenu inutile et rend les choses plus grandes et plus facile à lire/parcourir. Si vous vous souciez de cas n ° 2, puis aussi longtemps que les liens/boutons sur la page du clavier navigables, puis le cas 1 et 2 sont équivalentes.

Pour le cas 3, vous avez votre site web normal. Pour le cas 4, il semble que vous voulez cliquable choses pour être plus grand ou plus facile à toucher. Si il n'est pas possible de simplement tout faire plus grande pour tous les utilisateurs, une autre feuille de style peut vous fournir avec le touch-friendly modifications de mise en page.

La meilleure chose à faire est de fournir un lien vers l'écran tactile-version du site, quelque part sur la page. Pour le bien-connu des périphériques tactiles telles que l'iPad, vous pouvez renifler l'agent de l'utilisateur et de définir le contact de la feuille de style par défaut. Cependant, je voudrais examiner ce qui en fait la valeur par défaut pour tout le monde; si votre conception est bonne sur l'iPad il faut chercher assez bon sur n'importe quel ordinateur portable. Votre souris les utilisateurs avec moins-que-stellaires en cliquant sur les compétences seront heureux de trouver plus grand cliquez cibles, surtout si vous ajoutez approprié :hover ou mouseover effets pour permettre aux utilisateurs de savoir que les choses sont cliquables.

Je sais que vous avez dit que vous ne voulez pas de renifler les user-agents. Mais je prétends qu'à ce moment l'état de la prise en charge du navigateur pour cela est trop changeant de s'inquiéter à propos de la "bonne" façon de le faire. Les navigateurs finira par fournir les informations dont vous avez besoin, mais vous trouverez probablement qu'il faudra des années avant que cette information est omniprésente.

Answer 2

Bonne nouvelle! L'éditeur de projet de CSS4 Requêtes de Média ont inclus une nouvelle fonctionnalité de média 'pointeur'.

Des exemples typiques d'un " bon " système de pointage sont une souris, un track-pad ou un stylet en fonction de l'écran tactile. Doigt basée sur les écrans tactiles sont admissibles à titre de "grosses".

/* 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;
    }
}

Il est également possible de tester la requête de média à partir de JavaScript:

var isCoarsePointer = (window.matchMedia &&
                       matchMedia("(pointer: coarse)").matches);

Mise À Jour De Février. 11. 2013 Sur Windows 8 dernières versions de google Chrome (version 24+) détecter le toucher-matériel lors du lancement de l'application et d'exposer les événements tactiles. Malheureusement, si le "pointeur:grosse" renvoie faux, il n'y a aucun moyen de savoir si c'est parce que le pointeur de requêtes de média ne sont pas mises en œuvre ou parce qu'il n'y est une amende de pointeur. WebKit n'ont pas mis en œuvre "pointeur:amende" pourtant, nous ne pouvons pas vérifier que ce soit.

Mise À Jour Sept. 26. 2012 Testé dans Safari sur iOS6 et Chrome sur Android 4.1.1 et il n'y est pas encore. 'pointeur' et 'hover' media-queries atterri dans WebKit , le 30 Mai. Selon l'Agent Utilisateur, Safari utilise WebKit branche 536.26 du 25 avril, et le Chrome sur Android utilise et même plus ancienne (535.19). Pas sûr que WebKit branches de l'Agent Utilisateur chaînes sont dignes de confiance, mais ma page de test n'est pas en mesure de détecter pointeur de requêtes de média. La mise en œuvre à partir de Mai implémente uniquement le pointeur de la requête de support pour les périphériques tactiles, afin de pointeur: amende ne fonctionne pas pour les appareils avec une souris.

Answer 3

Google Chrome dispose d'un commutateur de ligne de commande pour l'activation de la touche événements. Désactivé par défaut. Donc, jusqu'à ce qu'ils leur permettent de nouveau tout le monde (j'espère qu'ils ne seront pas), il est possible de détecter le toucher avec l'aide de javascript comme je l'ai décrit dans la question..

Mise à jour le 3 juin 2010: Ce effectivement obtenu dans la version stable, le 25 Mai 2010 :( Ne sait pas ce que c'est une erreur ou pas.

Avez discuté de la question sur le w3c liste de diffusion, mais je doute que quelque chose va arriver très bientôt. http://lists.w3.org/Archives/Public/www-style/2010May/0411.html Ils pourraient discuter de ce cours TPAC, en novembre.

Mise à jour le 30 septembre 2010: théoriquement fixé dans Chrome 6. N'ai pas eu le temps de revenir à l'stable encore à vérifier. Depuis Chrome mise à niveau automatique, ce problème devrait être déjà disparu :)

Lisez ceci si vous envisagez de l'utiliser les media queries: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ et http://www.quirksmode.org/blog/archives/2010/09/more_about_medi.html

Mise à jour le 16 mai 2011: le W3C est en train de travailler sur une spécification des Évènements Tactiles, mais plus ou moins refusé de cacher les événements tactiles pour les terminaux sans contact matériel. Ne vous attendez donc pas le contact de détection d'événement à travailler pour le long.

Mise à jour le 6 juin 2012: Le W3C CSS4 les demandes des Médias (Éditeurs de Projet) spec ont quelque chose de très intéressant. Voir ma réponse distincte à ce sujet.

Answer 4

Je ne sais pas si normalisée requête de média comme Mozilla permettra de résoudre le problème par lui-même. Comme l'un de la teneur en Chrome des développeurs dit dans cette discussion, vous lié, la présence de l'événement tactile de soutien dans le navigateur ne signifie pas que les événements tactiles peuvent ou ne veulent pas le feu, ou même s'ils le font, que l'utilisateur ne veulent interagir par le biais de la touche entrée. De même, la présence de la touche d'entrée dans le dispositif ne signifie pas que l'utilisateur va utiliser la méthode de saisie - peut-être que l'appareil prend en charge la souris, le clavier, et la touche d'entrée et l'utilisateur préfère utiliser la souris ou une combinaison des trois types d'entrée.

Je suis d'accord avec le développeur de Chrome que soutenir les événements tactiles n'était pas un bug dans le navigateur. Un bon navigateur devrait soutenir les événements tactiles, car il peut être installé sur un périphérique qui prend en charge la saisie tactile. C'est le site du développeur de la faute qu'il a pris la manifestation de soutien à la moyenne de l'utilisateur de l'un sur l'autre par le toucher.

Il semble que nous avons besoin de savoir deux choses: (1) Quels sont tous les types d'entrée sur l'appareil (2) Quels sont tous les types d'événements dans le navigateur

Puisque nous ne savons pas #1 maintenant, il y a une approche proposée par PPK de quirksmode que j'aime. Il en parle ici: http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4

Fondamentalement, écouter les événements tactiles et les événements de la souris, et quand ils se produisent, configurer l'INTERFACE utilisateur en conséquence. Il s'agit évidemment de limiter le développeur. Je ne pense pas que c'est une approche valide pour votre problème avec le lien de la taille parce que vous ne voulez pas attendre pour l'interaction de modifier l'INTERFACE utilisateur. Toute la question est de présenter une autre de l'INTERFACE utilisateur (plus grand/plus petit lien) avant toute interaction se produit.

Je vous souhaite de faire votre proposition et il est inclus dans le CSS3. Jusqu'alors, autant que cela me fait mal de le dire, user agent sniffing semble être la meilleure approche.

p.s. J'espère espère espère que quelqu'un vient ici et prouve que j'ai tort

Answer 5

Non, il n'y a pas une telle chose. CSS a la taille de l'écran option, qui vous permettra d'optimiser la mise en page, mais c'est tout. Il est également media="handheld" , mais qui a également ne s'applique pas à vos exigences.

La détection de fonctionnalité pourrait fonctionner à l'aide de javascript, cependant, il ya des problèmes avec des événements différents pour les différents périphériques. PPK (l'homme derrière quirksmode.org) est en train de faire un énorme travail pour vérifier que le javascript est possible pour chaque mobile/appareil de poche, et il s'avère que rien ne semble être en standard avec ces appareils et pourtant ce n'est TOUJOURS pas s'appliquer à votre exigence pour le tactile de l'ordinateur portable périphériques.
(honnêtement, je ne sais pas pourquoi vous êtes préoccupé par un dispositif qui n'est même pas encore sorti, être pragmatique et s'inquiéter à ce sujet une fois qu'il est ici, et vous pouvez le tester)

PPK est le travail sur le navigateur mobile et tactile, vous économiserez des heures. Check it out ici