web-dev-qa-db-fra.com

Alternative à l'iPad / iPhone pour les États en vol stationnaire

J'ai récemment mis à jour mon portfolio personnel avec de la magie CSS3 et jQuery. Je suis extrêmement satisfait des résultats et oui, il est entièrement réactif. Mais j'ai un problème. J'ai structuré mes éléments de portefeuille de manière à ce que chaque boîte d'élément ait une superposition, lorsque l'utilisateur survole un élément, la superposition se déclenche et révèle le contenu. Cela fonctionne bien sur un navigateur avec une souris.

Maintenant, sur un iPhone/iPad, visuellement, le site a fière allure, mais évidemment l'utilisateur n'a pas de souris et n'a pas d'état de vol stationnaire convivial. Quelle est la méthode conventionnelle la plus éprouvée par les utilisateurs pour fournir gracieusement une alternative au "survol pour révéler le contenu".

De plus, avant que quelqu'un ne le dise, je suis conscient que les effets de survol que j'ai sur mon site ne servent à rien, mais ils ont juste l'air sympa. Voir ici

androidcssipadhovertablet
15
benhowdle89

Il n'y a pas d'équivalent en survol sur les appareils iOS. Le geste le plus conventionnel pour interagir avec le contenu est "taper". Vous pouvez faire en sorte que les zones de contenu ouvrent une fenêtre contextuelle ou une superposition à la pression (ce qui fonctionnerait mieux sur iPad que sur iPhone). L'utilisation d'autres gestes qui n'ont pas de convention établie solide pourrait simplement dérouter les utilisateurs. Mais il pourrait être plus gracieux et utilisable de mettre tout le contenu bien en vue.

14
Katie C

Maintenir votre conception actuelle ...

Comme mentionné, il n'y a pas de comportement de vol stationnaire équivalent sur les appareils iOS. Même si vous avez implémenté un comportement "suivre le doigt", la plupart des utilisateurs déplaceront probablement leur doigt hors de l'écran, se déplaceront vers la cible, puis toucheront à nouveau l'écran.

Une approche serait d'avoir de petites boucles de page dans les coins inférieurs. Cela permet aux utilisateurs de savoir que davantage d'informations sont disponibles et utilise une convention iOS réelle et existante. Les gens pouvaient atteindre le contenu ou l'ouvrir complètement, et il resterait en place lorsqu'ils passeraient aux autres boîtes.

6
Splog

Le simple clic (toucher du doigt) est l'alternative de survol la plus appropriée sur les appareils tactiles.

3
Jørn E. Angeltveit

Comme indiqué, "tap" est l'interaction typique. Si votre objectif est principalement de faire en sorte que cela fonctionne sur iOS, je suggère un événement tactile, puis j'utilise le style de retournement de carte pour afficher le texte au dos de la carte. Il est certes beaucoup utilisé, mais je dirais que cela devient un moyen standard de gérer les `` méta '' informations sur les éléments d'un appareil tactile iOS.

Alternativement, vous pouvez simplement le laisser tel quel et déclencher le texte sur un robinet, puis le masquer sur le suivant.

3
DA01

Je crois qu'une façon d'activer le "survol" sur un écran tactile serait avec une double touche séquentielle. Par cela, je veux dire toucher et maintenir l'écran sur une partie inactive (par exemple, pas sur un lien), puis `` appuyer '' (et libérer) la zone avec les informations de survol tout en maintenant la première touche. Les informations de survol restent visibles jusqu'à ce que la première touche soit relâchée.

2
Jeffers

Si un utilisateur utilisant un appareil iOS rencontre un lien avec un :hover CSS balise le processus comme suit:

  1. Première pression: le :hover CSS est activé
  2. Deuxième appui: l'adresse du lien est suivie

Référence SO question et un démo en direct .

0
Joe Masilotti

Ajouter cursor: pointer à l'élément qui a un style survolé, active l'état pour iOS et conserve la fonctionnalité pour les autres. Mais vous voudrez peut-être utiliser Modernizr pour ajouter cette déclaration uniquement pour les appareils tactiles, donc vous n'obtiendrez pas un faux lien au cas où vous n'utilisez pas un <a> tag.

.element {
  cursor: pointer;
}

.element:hover {
  /* your custom styles */
}
0
Nriq