Désactiver le zoom automatique dans la balise «Texte» de saisie - Safari sur iPhone

J'ai créé une page HTML avec une <input>balise type="text". Lorsque je clique dessus en utilisant Safari sur iPhone, la page s'agrandit (zoom automatique). Quelqu'un sait-il comment désactiver cela?

Le navigateur zoomera si la taille de police est inférieure à 16pxet la taille de police par défaut pour les éléments de formulaire est 11px(au moins dans Chrome et Safari).

De plus, l' selectélément doit avoir la focuspseudo-classe attachée.

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

Il est pas nécessaire d'utiliser tout ce qui précède, vous pouvez simplement le style des éléments dont vous avez besoin, par exemple: il suffit text, numberet textarea:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

Solution alternative pour que les éléments d'entrée héritent d'un style parent:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

Vous pouvez empêcher Safari de zoomer automatiquement sur les champs de texte lors de la saisie par l'utilisateur sans désactiver la possibilité pour l'utilisateur de pincer le zoom. Ajoutez simplement maximum-scale=1mais omettez l'attribut à l'échelle de l'utilisateur suggéré dans d'autres réponses.

C'est une option intéressante si vous avez un formulaire dans une couche qui "flotte" autour si vous zoomez, ce qui peut entraîner le déplacement d'éléments importants de l'interface utilisateur hors de l'écran.

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

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

Nouveau: IOS zoomera toujours, sauf si vous utilisez 16px sur l'entrée sans la mise au point.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

J'ai ajouté un arrière-plan car IOS n'ajoute aucun arrière-plan à la sélection.

Si votre site Web est correctement conçu pour un appareil mobile, vous pouvez décider de ne pas autoriser la mise à l'échelle.

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

Cela résout le problème autour duquel votre page ou formulaire mobile va «flotter».

En résumé, la réponse est: définissez la taille de la police des éléments du formulaire sur au moins 16 pixels

input[type='text'],textarea {font-size:1em;}

Le moyen approprié de résoudre ce problème consiste à remplacer la fenêtre d'affichage des métadonnées par:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

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 mousedown ou focus.

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.

Ajouter une échelle utilisateur = 0 pour afficher la méta comme suit

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

A travaillé pour moi :)

J'ai récemment (aujourd'hui: D) dû intégrer ce comportement. Afin de ne pas impacter les champs de conception d'origine, y compris le combo, j'ai choisi d'appliquer la transformation au centre du champ:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

Comme de nombreuses autres réponses l'ont déjà souligné, cela peut être obtenu en ajoutant maximum-scaleà la viewportbalise META. Cependant, cela a pour conséquence négative de désactiver le zoom utilisateur sur les appareils Android . ( Il ne désactive pas le zoom utilisateur sur les appareils iOS depuis la v10 .)

Nous pouvons utiliser JavaScript pour ajouter dynamiquement maximum-scaleà la méta viewportlorsque l'appareil est iOS. Cela permet d'obtenir le meilleur des deux mondes: nous permettons à l'utilisateur de zoomer et d' empêcher iOS de zoomer sur les champs de texte sur le focus.

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

Code:

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// /programming/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

Le hack Javascript qui fonctionne sur iOS 7. Il est basé sur la réponse de @dlo mais les événements mouseover et mouseout sont remplacés par les événements touchstart et touchend. Fondamentalement, ce script ajoute un délai d'attente d'une demi-seconde avant que le zoom ne soit à nouveau activé pour empêcher le zoom.

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

Cela a fonctionné pour moi:

input, textarea {
    font-size: initial;
}

J'ai utilisé la solution de Christina ci-dessus, mais avec une petite modification pour le bootstrap et une autre règle à appliquer aux ordinateurs de bureau. La taille de police par défaut de Bootstrap est 14px, ce qui provoque le zoom. Ce qui suit le change en 16px pour les "contrôles de formulaire" dans Bootstrap, empêchant le zoom.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

Et revenons à 14px pour les navigateurs non mobiles.

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

J'ai essayé d'utiliser .form-control: focus, qui l'a laissé à 14px, sauf sur la mise au point qui l'a changé en 16px et cela n'a pas résolu le problème du zoom avec iOS8. Au moins sur mon iPhone utilisant iOS8, la taille de la police doit être de 16 pixels avant de se concentrer pour que l'iPhone ne zoome pas sur la page.

Je l'ai fait, également avec jQuery:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

Bien sûr, certains autres éléments de l'interface peuvent devoir être adaptés si cette 16pxtaille de police casse le design.

Après un certain temps, j'ai trouvé cette solution

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

Sur "mousedown", il définit la taille de police de l'entrée à 16 pixels. Cela empêchera le zoom. Lors de l'événement focus, la taille de police revient à sa valeur initiale.

Contrairement aux solutions publiées précédemment, cela vous permettra de définir la taille de police de l'entrée comme vous le souhaitez.

Après avoir lu presque toutes les lignes ici et testé les différentes solutions, voici, grâce à tous ceux qui ont partagé leurs solutions, ce que j'ai trouvé, testé et travaillé pour moi sur iPhone 7 iOS 10.x:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

Il présente cependant certains inconvénients, notablement un "saut" en raison du changement rapide de taille de police qui se produit entre les états de "survol" et de "mise au point" - et l'impact du redessin sur les performances.

Inspiré par la réponse de @jirikuchta, j'ai résolu ce problème en ajoutant ce peu de CSS:

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

Pas de JS, et je ne remarque aucun flash ou quoi que ce soit.

Il convient de noter qu'un viewportavec maximum-scale=1fonctionne également, mais pas lorsque la page est chargée en tant que iframe, ou si vous avez un autre script modifiant le viewport, etc.

Les pseudo-éléments comme :focusne fonctionnent plus comme avant. Depuis iOS 11, une simple déclaration de réinitialisation peut être ajoutée avant vos styles principaux (à condition de ne pas les remplacer avec une taille de police plus petite).

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

Il convient de mentionner que pour les bibliothèques CSS telles que Tachyons.css, il est facile de remplacer accidentellement la taille de votre police.

Par exemple, class: f5est équivalent à:fontSize: 1rem ce qui est bien si vous avez conservé l'échelle de police du corps par défaut.

Cependant: si vous choisissez la classe de taille de police: f6ce sera équivalent à fontSize: .875remsur un petit écran vers le haut. Dans ce cas, vous devrez être plus précis sur vos déclarations de réinitialisation:

  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}

Par ailleurs, si vous utilisez Bootstrap , vous pouvez simplement utiliser cette variante:

.form-control {
  font-size: 16px;
}

J'ai dû "corriger" le problème du zoom automatique dans les contrôles de formulaire pour un site Web de l'université néerlandaise (qui utilisait 15 pixels dans les contrôles de formulaire). Je suis venu avec l'ensemble d'exigences suivantes:

• l'utilisateur doit toujours pouvoir zoomer
• la taille de la police doit rester la même
• aucun flash de style différent temporaire
• aucune exigence jQuery
• doit fonctionner sur le dernier iOS et ne pas entraver toute autre combinaison OS / appareil
• si possible pas de timeouts magiques, et si nécessaire effacer correctement les minuteries

Voici ce que j'ai trouvé jusqu'à présent:

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

Quelques notes:

• Notez que jusqu'à présent, je ne l'ai testé que sur iOS 11.3.1, mais je le testerai bientôt sur quelques autres versions
• L'utilisation d'événements focus signifie qu'il nécessite au moins iOS 5.1 (mais je vois quand même des sites que nous construisons fonctionnant dans des versions iOS plus anciennes que 9 comme un bonus sympa)
• Utilisation de la délégation d'événements car de nombreux sites sur lesquels je travaille ont des pages qui pourraient créer dynamiquement des contrôles de formulaire
• Définition des eventListeners sur l'élément html (documentElement) afin de ne pas avoir à attendre que le corps soit disponible (ne voulez pas vous embêter à vérifier si le document a l'état prêt / chargé ou devez attendre l'événement DOMContentLoaded)

Au lieu de simplement définir la taille de la police sur 16 pixels, vous pouvez:

1. Stylez le champ de saisie de manière à ce qu'il soit plus grand que sa taille prévue, ce qui permet de définir la taille de police logique sur 16 pixels.
2. Utilisez la scale()transformation CSS et les marges négatives pour réduire le champ de saisie à la taille correcte.

Par exemple, supposons que votre champ de saisie soit initialement stylisé avec:

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

Si vous agrandissez le champ en augmentant toutes les dimensions de 16/12 = 133,33%, puis réduisez en utilisant scale()de 12/16 = 75%, le champ de saisie aura la bonne taille visuelle (et la taille de police), et il n'y aura pas de zoom sur concentrer.

Comme cela scale()n'affecte que la taille visuelle, vous devrez également ajouter des marges négatives pour réduire la taille logique du champ.

Avec ce CSS:

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

le champ de saisie aura une taille de police logique de 16 pixels tout en semblant avoir du texte 12 pixels.

J'ai un article de blog où j'entre dans un peu plus de détails, et j'ai cet exemple en HTML visible:
Pas de zoom d'entrée dans Safari sur iPhone, le moyen parfait pour les pixels

Même avec ces réponses, il m'a fallu trois jours pour comprendre ce qui se passait et j'aurai peut-être besoin de la solution à l'avenir.

Ma situation était légèrement différente de celle décrite.

Dans le mien, j'avais un texte contentable dans une div sur la page. Lorsque l'utilisateur a cliqué sur une div différente, un bouton en quelque sorte, j'ai automatiquement sélectionné du texte dans la div modifiable (une plage de sélection qui avait été précédemment enregistrée et effacée), j'ai exécuté une commande execCommand de texte enrichi sur cette sélection et l'ai effacée à nouveau.

Cela m'a permis de changer invisiblement les couleurs du texte en fonction des interactions des utilisateurs avec les divisions de couleurs ailleurs sur la page, tout en gardant la sélection normalement cachée pour leur permettre de voir les couleurs dans le contexte approprié.

Eh bien, sur Safari sur iPad, cliquer sur la couleur div a entraîné l'apparition du clavier à l'écran, et rien de ce que j'ai fait ne l'a empêché.

J'ai finalement compris comment l'iPad faisait ça.

Il écoute une séquence de démarrage et de contact qui déclenche une sélection de texte modifiable.

Lorsque cette combinaison se produit, elle affiche le clavier à l'écran.

En fait, il fait un zoom dolly où il développe la page sous-jacente tout en zoomant sur le texte modifiable. Cela m'a pris un jour juste pour comprendre ce que je voyais.

Donc, la solution que j'ai utilisée était d'intercepter à la fois le démarrage et le toucher sur ces divisions de couleurs particulières. Dans les deux gestionnaires, j'arrête la propagation et le bouillonnement et renvoie false. Mais dans l'événement tactile, je déclenche le même comportement que celui déclenché par le clic.

Donc, avant, Safari déclenchait ce que je pensais être "touchstart", "mousedown", "touchend", "mouseup", "click", et à cause de mon code, une sélection de texte, dans cet ordre.

La nouvelle séquence en raison des interceptions est simplement la sélection de texte. Tout le reste est intercepté avant que Safari puisse le traiter et faire son truc de clavier. Les interceptions touchstart et touchend empêchent également les événements de la souris de se déclencher, et dans le contexte, cela est tout à fait correct.

Je ne connais pas un moyen plus simple de décrire cela, mais je pense qu'il est important de l'avoir ici parce que j'ai trouvé ce fil dans l'heure suivant la première rencontre avec le problème.

Je suis sûr à 98% que le même correctif fonctionnera avec les zones de saisie et tout le reste. Interceptez les événements tactiles et traitez-les séparément sans les laisser se propager ou bouillonner, et envisagez de faire des sélections après un petit délai juste pour vous assurer que Safari ne reconnaît pas la séquence comme déclencheur du clavier.

Je vois des gens ici faire des choses étranges avec JavaScript ou la fonction de fenêtre et désactiver tous les zooms manuels sur les appareils. À mon avis, cela ne devrait pas être une solution. L'ajout de cet extrait CSS désactivera le zoom automatique dans iOS sans changer votre taille de police en un nombre fixe comme 16px.

Par défaut, j'utilise une taille de police de 93,8% (15px) dans les champs de saisie et en ajoutant mon extrait de code CSS, cela reste à 93,8%. Pas besoin de changer en 16px ou d'en faire un nombre fixe.

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}

La définition d'une taille de police (pour les champs de saisie) égale à la taille de la police du corps semble être ce qui empêche le navigateur de faire un zoom avant ou arrière. Je suggère d'utiliser font-size: 1remune solution plus élégante.

Comme le zoom avant automatique (sans zoom arrière) est toujours ennuyeux sur iPhone, voici un JavaScript basé sur la suggestion de dlo de travailler avec le focus / flou.

Le zoom est désactivé dès qu'une entrée de texte est interrompue et réactivé lorsque l'entrée est laissée.

Remarque: Certains utilisateurs peuvent ne pas apprécier l'édition de textes dans une petite entrée de texte! Par conséquent, je préfère personnellement changer la taille du texte de l'entrée lors de l'édition (voir le code ci-dessous).

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Le code suivant changera la taille du texte d'une entrée à 16 pixels (calculée, c'est-à-dire dans la taille de zoom actuelle) pendant que l'élément a le focus. L'iPhone ne zoomera donc pas automatiquement.

Remarque: Le facteur de zoom est calculé en fonction de window.innerWidth et de l'affichage de l'iPhone avec 320 pixels. Cela ne sera valable que pour l'iPhone en mode portrait.

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Il m'a fallu du 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));
});

Basé sur la réponse de Stephen Walsh ... Ce code fonctionne sans changer la taille de la police des entrées sur le focus (qui semble boiteux), et il fonctionne toujours avec FastClick , que je suggère d'ajouter à tous les sites mobiles pour aider à apporter le "snappy". Ajustez votre "largeur de fenêtre" en fonction de vos besoins.

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });

Un commentaire pour la meilleure réponse sur la définition de la taille de la police à 16 pixels a demandé comment cela était une solution, et si vous vouliez une police plus grande / plus petite.

Je ne sais pas tout de vous, mais utiliser px pour les tailles de police n'est pas la meilleure solution, vous devriez les utiliser.

J'ai rencontré ce problème sur mon site réactif où mon champ de texte est supérieur à 16 pixels. J'ai eu mon conteneur de formulaires défini sur 2rem et mon champ de saisie sur 1.4em. Dans mes requêtes mobiles, je change la taille de police html en fonction de la fenêtre d'affichage. Étant donné que le code HTML par défaut est 10, mon champ de saisie est calculé à 28 pixels sur le bureau

Pour supprimer le zoom automatique, j'ai dû changer mon entrée à 1.6em. Cela a augmenté ma taille de police à 32 pixels. Juste un peu plus haut et à peine perceptible. Sur mon iPhone 4 et 5, je change ma taille de police html à 15 pixels pour le portrait et à 10 pixels pour le paysage. Il est apparu que le point idéal pour cette taille de pixel était de 48 pixels, c'est pourquoi je suis passé de 1,4em (42px) à 1,6em (48px).

La chose que vous devez faire est de trouver le point idéal sur la taille de la police, puis de la convertir en arrière dans vos tailles rem / em.

Voici un hack que j'ai utilisé sur l'un de mes projets:

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

J'ai fini avec les styles et l'échelle initiaux que je voulais, mais pas de zoom sur la mise au point.