Empêcher iPhone de zoomer forme?

cela peut être évité en réglant font-size:16px à tous les champs d'entrée.

pour iOS, vous pouvez éviter le zoom des éléments d'entrée en leur attribuant simplement une taille de police jugée suffisante par L'OS (>=16px), évitant ainsi le besoin de zoomer, par exemple:

input, select, textarea {
    font-size: 16px;
}

C'est une solution également utilisés par les différents cadres et permet d'éviter l'utilisation d'une balise meta.

Cela pourrait être utile de regarder:

Désactiver le Zoom Automatique en Input "Texte" tag - Safari sur iPhone

vous auriez essentiellement besoin de capturer l'événement de tapoter sur un élément de formulaire, puis de ne pas exécuter l'action iOS par défaut de zoomer, mais tout de même lui permettant de zoomer pour le reste de la page.

Edit:

le lien mentionne,

2) Vous pouvez modifier dynamiquement la balise META viewport en utilisant javascript (voir Activer/désactiver zoom sur iPhone safari avec Javascript?)

D'élaborer:

1. la balise meta De Viewport est paramétrée pour permettre le zoom
2. l'utilisateur tape sur l'élément de formulaire, modifie la balise meta pour désactiver le zoom
3. en appuyant sur done, viewport est modifié pour permettre le zoom

et si vous ne pouvez pas changer la balise lorsque vous cliquez sur un élément de formulaire, mettez une div qui imite l'élément de formulaire que lorsque vous appuyez sur elle, elle change la balise, puis appelle l'entrée.

Le plus voté en réponse à une taille de police ne fonctionne pas pour moi. En utilisant javascript pour identifier le client avec les balises meta dans les réponses ici, nous pouvons empêcher le comportement de zoom de l'iPhone sur la mise au point d'entrée tout en gardant autrement la fonctionnalité de zoom intact.

$(document).ready(function ()
{
    if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
    {
        $(document).on("focus", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
        });

        $(document).on("blur", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
        });
    }
});

il semble que nous devions remplacer la balise meta par de nouvelles valeurs sur l'événement flou, juste pour la supprimer ne semble pas déclencher une mise à jour comportement.

notez que L'interface utilisateur initialise toujours le zoom, mais il recule rapidement. Je crois que c'est acceptable et les utilisateurs d'iPhone doivent déjà s'habituer à ce que le navigateur ait un zoom dynamique en cours de toute façon dans les scénarios applicables.

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

ne travaille plus sur iOS10.0.1

font-size:16px œuvres

définir la taille de la police fonctionne parfaitement pour les éléments d'entrée, mais pas pour les éléments de sélection pour moi. Pour les balises select, j'ai besoin de désactiver visuport zoom lorsque l'utilisateur commence à interagir avec l'élément select, puis de le réactiver à la fin.

//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})

$('select').focusout(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})

vient de trouver une solution simple si vous utilisez Bootstrap:

comme mentionné dans w3s: vous pouvez rapidement dimensionner les étiquettes et les contrôles de forme à l'intérieur d'un formulaire Horizontal en ajoutant .formulaire-groupe-lg à l'élément.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="control-label">Large Label</label>
    <div>
      <input class="form-control" type="text">
    </div>
  </div>

voir deuxième exemple sur cette page: http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

testé en Safari et Chrome sur un iPhone SE et it fonctionne comme un charme!

donc voici la dernière solution qui fonctionne bien pour moi.

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

voici la Solution jQuery qui me convient.

device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input,  select, textarea {font-size: 16px;}</style>');
}

utilisez maximum-scale=1 au lieu de user-scalable=no pour prévenir le problème de zoom de la forme sans briser la capacité de l'utilisateur de pincer le zoom.

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