Désactiver le zoom sur le focus de la saisie dans une page web Android

Question

Voici le dilemme : j'ai une page Web (uniquement pour les appareils Android) et dans cette page, j'ai une zone de saisie (une zone de texte en particulier) et lorsqu'elle reçoit le focus, le navigateur effectue un zoom avant. Je ne veux pas qu'il fasse un zoom avant - cela semble facile, non ?

C'est là que ça devient amusant : Je dois être capable de zoomer en général, donc ne dites pas

<meta name='viewport' content='user-scalable=0'>

Ça ne marchera pas pour moi.

En outre, la zone de saisie ne reçoit pas d'événements de clic. Elle apparaît lorsqu'un autre bouton est cliqué et reçoit le focus de manière programmatique.

Voici ce que j'ai essayé et qui a échoué jusqu'à présent :

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

Cela a également échoué :

<input type='text' onfocus="return false">

Et ceci :

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

Des idées ?

Answer 1

Ce qui suit a fonctionné pour moi (Android Galaxy S2) :

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

Answer 2

Pas possible !

J'ai de mauvaises nouvelles pour vous tous. Cela fait maintenant 6 mois et personne n'a répondu correctement à la question.

J'ai aussi fini de travailler sur ce projet et cet employeur.

J'ai peur de le dire, mais ce que j'ai demandé est impossible. Désolé. Mais je vais laisser la question ouverte pour que les gens puissent voir les autres options.

Answer 3

Les problèmes d'échelle provoquent un zoom sur l'entrée

Il est très difficile de dimensionner le contenu pour différentes résolutions et tailles d'écran, ce qui est finalement la cause de ce problème de zoom.

La plupart des navigateurs mobiles ont un déclencheur sur le focus de l'entrée (que vous ne pouvez pas contourner sans difficulté) :

if (zoom-level < 1)
   zoom to 1.5
   center focused input relative to screen

*Oui, c'était bien trop simplifié.

Le mythe de l'échelle des métabalises est corrigé.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> Tous ces paramètres d'affichage ne sera pas empêcher le zoom de l'input-focus si vous êtes en zoom arrière. Elles ne remplaceront pas non plus tout autre formatage html, body ou élément qui pousserait la fenêtre à une largeur supérieure à celle de l'écran.

Cause principale

Utilisation d'une fenêtre ou d'un corps plus grand que les dimensions de l'écran de l'appareil.

Considérez la taille d'écran standard de la plupart des smartphones Android de la gamme Galaxy : 360 x 650. Si le corps de votre document, ou fenêtre, est défini pour être plus grand que cela (disons 1024 de large pour que ce soit évident), plusieurs choses peuvent se produire :

1. Le navigateur peut effectuer un zoom automatique pour adapter la largeur à l'écran.
   2. L'utilisateur peut faire ce qui précède.
   3. Vous avez peut-être fait ce qui précède.
2. Le navigateur rétablira le niveau de zoom lors des visites ultérieures de la page.
3. Vous visualisez maintenant le contenu avec un zoom de 0,35x.

État initial 1x

Lorsqu'elle est chargée, la page ne tient pas. Certains navigateurs peuvent effectuer un zoom arrière pour s'adapter à la fenêtre, mais c'est certainement le cas de l'utilisateur. En outre, si vous avez déjà effectué un zoom arrière sur cette page, le navigateur mémorisera le niveau de zoom.

Zoom arrière pour adapter 0,35x

Une fois dézoomée, la largeur s'adapte bien, et une page avec plus de surface verticale remplit bien l'écran... mais...

Remarquez que le navigateur se trouve maintenant dans un état où le texte et les entrées (dimensionnés pour un zoom normal de 1x) seraient bien trop petits pour être lus, ce qui déclenche un comportement de convivialité consistant à zoomer sur les champs d'entrée lorsqu'ils reçoivent le focus.

Zoom sur l'Input-Focus 1.5x

Le comportement typique dans le cas ci-dessus est de zoomer à 1,5x, pour assurer la visibilité de la saisie. Le résultat (si vous avez tout stylé pour que l'apparence soit meilleure en cas de zoom arrière, ou pour un écran plus grand) est moins que souhaitable.

Solution 1

Utilisez une combinaison de règles css media, de détection d'appareils, ou ce qui convient le mieux à votre situation. Définissez la fenêtre et le corps à une taille qui remplit l'espace de l'écran, sans le dépasser.

• C'est pourquoi beaucoup de gens réussissent à forcer la taille du texte d'entrée à 16px ;
  • Une fois que vous avez fait ça, il est clair que vous avez fait un gros zoom arrière.
  • Elle présente également l'avantage de tromper le navigateur en permettant à des fenêtres légèrement dézoomées de ne pas déclencher le focus-zoom.

Solution 2

Utilisez le méta viewport, mais faites ensuite attention aux largeurs css.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

• Lorsque vous utilisez cette méthode, vous devez effectuer l'une des opérations suivantes :
  • N'utilisez que des pourcentages pour les largeurs.
  • Définissez une largeur em, et utilisez uniquement em et % pour les largeurs.
  • voir la solution 1 pour l'utilisation des largeurs en px.

Solution 3

jQuery.mobile $.mobile.zoom.disable();

Assurez-vous simplement que vous commencez à vous développer avec elle dès le début, et non au milieu.

Answer 4

Je ne sais pas si c'est le meilleur moyen, mais cela fonctionne pour moi sur Android et iphone.

input:focus { font-size: 16px!important}

Vous pouvez utiliser des requêtes média pour cibler uniquement les appareils mobiles.

Answer 5

Je me suis penché sur ce problème car c'est quelque chose qui m'irrite dans mon application Android HTML5. Je peux offrir une demi réponse. C'est à dire, comment arrêter la mise à l'échelle de la page quand un champ de texte est focalisé.

Nécessite Jquery Mobile :

$('#textfield').textinput({preventFocusZoom:true});

fait exactement cela.

Mais, comme je l'ai dit, cela ne résout que la moitié du problème. L'autre moitié consiste à permettre à l'utilisateur de zoomer à nouveau sur la page par la suite. La documentation que j'ai trouvée semble suggérer que

    $('#textfield').textinput({preventFocusZoom:false});

ou

$('#textfield').textinput('option','preventFocusZoom',false);

devrait le désactiver, mais je n'ai pas réussi à faire fonctionner ces deux options. Ce n'est pas un problème si vous emmenez l'utilisateur sur une autre page par la suite, mais c'est d'une utilité limitée si, comme moi, vous chargez le contenu par AJAX.

EDIT : Bien que destiné à IOS,

$.mobile.zoom.disable();

Il arrête aussi le zoom. D'une manière plus générique. Mais malheureusement

$.mobile.zoom.enable();

Ne parvient pas à restaurer la fonctionnalité comme l'ancien code.