web-dev-qa-db-fra.com

Désactiver le zoom automatique / le zoom de champ sur les balises d'entrée sur mon site mobile - SANS désactiver toutes les capacités de zoom

J'ai passé toute la journée à chercher une solution, et ce site revient sans cesse, SO pourquoi ne pas vous demander les gars.

Je construis le site Web mobile de notre entreprise et nous voulons désactiver le zoom automatique utilisé par les appareils mobiles pour zoomer sur les entrées de texte/recherche/e-mail lorsqu'elles sont concentrées. Je construis le site en HTML5 et j'ai vu/testé le <meta name="viewport" content="width=device-width, user-scalable=no" /> Solution. Avec diverses propriétés (ie. Minimum-scale = #, maximum-scale = # ") Cela fonctionne dans presque TOUS les appareils mobiles sur lesquels je teste. Un seul problème. Je veux que l'utilisateur puisse pour zoomer/dézoomer à leur guise. (nous avons quelques photos de produits de plus haute résolution qui seraient agréables à voir de près)

Comment puis-je désactiver le zoom avant en cliquant sur les balises d'entrée, tout en conservant le contrôle manuel complet du zoom utilisateur?

p.s le site utilise également jQuery. Donc, toute pensée utilisant cela pourrait aider.

merci Jrak

jqueryhtmlhtml5inputzoom
32
John Rakowski

Définition de la balise META dans le <head> comme ça a fonctionné pour moi:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
29
Scott

Cela peut ne pas fonctionner exactement pour votre style, mais si vous définissez la taille de police des éléments d'entrée à 16 pixels ou plus, le zoom onfocus s'arrêtera.

12
AllanKH

Voir: Désactiver le zoom automatique dans la balise d'entrée "Texte" - Safari sur iPhone

Il n'y a aucun moyen propre que je pourrais trouver, mais voici un hack ...

1) J'ai remarqué que l'événement survol survient avant le zoom, mais le zoom se produit avant les événements de souris ou de mise au point.

2) Vous pouvez modifier dynamiquement la balise de la fenêtre META en utilisant javascript (voir Activer/désactiver le zoom sur Safari iPhone avec Javascript? )

Donc, essayez ceci (indiqué dans jquery pour la compacité):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

C'est certainement un hack ... il peut y avoir des situations où le survol/le bas n'attrape pas toujours les entrées/sorties, mais cela a bien fonctionné dans mes tests et c'est un bon début.

11
dlo

Il m'a fallu un certain temps pour le trouver, mais voici le meilleur code que j'ai trouvé ...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});
6
Stephen Walsh

un hack très simple consiste à définir:

input, textarea {font-size:16px;}
4
Steele Rocky