Est-ce que android ajoute une zone active supplémentaire autour des boutons d'envoi?

Android semble augmenter la zone cliquable d'un bouton de soumission sur un formulaire HTML sur lequel je travaille. C'est comme s'il y avait environ 25 pixels à la droite du bouton d'envoi qui sont également activables. Ceci est problématique car, dans ma conception, à droite du bouton de soumission est un élément <A> avec un gestionnaire d'événements lié à celui-ci. Le fait de taper le <A> soumet souvent le formulaire au lieu de déclencher le gestionnaire d'événements. Je fais la plupart de mes tests dans Browerstack et certains sur du vrai matériel. Le problème se manifeste dans les appareils (virtuels) avec des largeurs d'écran inférieures (par exemple 320px), et semble être là dans Android 2.3 et 4. Les mêmes pages dans iPhone (4s, iOS6) et Blackberry (v7) ne présentent pas le problème.Est-ce que android ajoute une zone active supplémentaire autour des boutons d'envoi?

Here's a CodePen example, et un single file version du même code pour faciliter la visualisation sur mobile

Quelqu'un at-il vu d'autre cela? Est-ce une caractéristique? Un bug - soit dans Android ou dans mon code?

Source

2012-12-04 Simon Dell

Dans le cas où je ne suis pas clair, ce supplément hit-zone n'est pas visible. Il ne prend pas de place, ne met de côté aucun des éléments environnants. La zone de frappe se comporte comme si le bouton avait 'position: relative; rembourrage-droit: 30px; z-index: 100; 'appliqué, mais aucun positionnement réel n'est appliqué à l'un des éléments concernés. –

Avez-vous essayé d'y appliquer un reset.css? Il semble être un problème de webkit Android.

Également, essayez d'utiliser des zones 40px pour les boutons tactiles.

Source

2012-12-04 15:45:49 SMillerNL

Je suis d'accord 40px zones tactiles serait mieux. Le design auquel je dois travailler, accepté par le client, produit par le 3ème parti, avant que je ne sois arrivé sur le projet, ne fonctionne pas à ces recommandations, donc il n'y a pas beaucoup de place ici. Je vais pousser pour des changements. –

J'ai choisi cela comme réponse parce que c'est un conseil sensé, et je voulais "fermer" sur cette question. Je n'ai pas pu l'appliquer, pour les raisons indiquées. –

Je recommande d'utiliser la feuille de style reset.css fournie par meyerweb.com. Il supprime (presque) tous les styles que les navigateurs appliqueraient, mais vous devrez peut-être retravailler beaucoup de CSS et mettre beaucoup de choses dans des balises telles que <h1>.

CSS Tools: Reset CSS

Source

2012-12-04 15:47:24

C'est une suggestion utile, et un dérivé de ce fichier est déjà dans le projet. –

En poursuivant un peu plus loin, j'ai pensé que je ferais mieux de vérifier ce qui se trouvait dans la réinitialisation à laquelle vous étiez lié et en quoi il pourrait être différent du fichier que j'utilisais. [La réinitialisation de Mayer] (http://meyerweb.com/eric/tools/css/reset/) ne spécifie rien qui contrôlerait l'espacement autour des contrôles d'entrée. Il n'inclut même pas la chaîne "entrée" du tout. La version du fichier que j'ai est plus explicite, contrôlant '-webkit-appearance',' box-sizing' ainsi que les marges et le remplissage. Je ne vois pas ce qui causerait cela à part quelques règles spécifiques à Android sur les zones tactiles autour des boutons de soumission. –

Est-ce que android ajoute une zone active supplémentaire autour des boutons d'envoi?

Répondre

Questions connexes