Désactiver le Zoom automatique dans la balise D'entrée "Text" - Safari sur iPhone

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

de plus, l'élément select doit être muni de la pseudo-classe focus .

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 n'est pas nécessaire d'utiliser tout ce qui précède, vous pouvez simplement style les éléments dont vous avez besoin, par exemple: juste text , number , et textarea :

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

Autre solution pour avoir les éléments d'entrée hériter d'un style parent:

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

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

Nouveau: IOS va toujours zoomer, sauf si vous utilisez 16px sur l'entrée sans le focus.

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

j'ai ajouté un fond puisque IOS n'ajoute aucun fond sur le select.

si votre site web est correctement conçu pour un appareil mobile, vous pourriez décider de ne pas permettre 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 que votre page ou formulaire mobile va "flotter" autour.

en résumé, la réponse est: réglez la taille de police des éléments de formulaire à au moins 16px

vous pouvez empêcher Safari de zoomer automatiquement sur les champs de texte lors de l'entrée de l'utilisateur sans désactiver la capacité de l'utilisateur de pincer le zoom. Il suffit d'ajouter maximum-scale=1 , mais en laissant de côté l'attribut de l'échelle de l'utilisateur suggéré dans d'autres réponses.

c'est une option valable si vous avez une forme dans une couche qui" flotte " autour si elle est zoomée, ce qui peut faire bouger les éléments importants de L'interface utilisateur de l'écran.

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

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

la bonne façon de corriger cette question Est de changer meta viewport en:

<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 puisse trouver, Mais voici un piratage...

1) j'ai remarqué que l'événement mouseover se produit avant le zoom, mais le zoom se produit avant les événements mousedown ou focus.

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

alors, essayez ceci (montré en jquery pour 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 définitivement un piratage... il peut y avoir des situations où mouseover/down ne captent pas toujours les entrées/sorties, mais cela a bien fonctionné dans mes tests et est un bon départ.

j'ai récemment (aujourd'hui :D) dû intégrer ce comportement. Afin de ne pas avoir d'impact sur les champs de conception originaux, y compris 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;
}

ajouter modulable par l'utilisateur=0 pour viewport meta comme suit

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

a travaillé pour moi:)

JavaScript hack qui fonctionne sur iOS 7. Ceci 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. Basicly ce script ajoute un délai 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" />');
} 

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

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

et retour à 14px pour les navigateurs non mobiles.

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

j'ai essayé d'utiliser .forme-Contrôle: focus, qui l'a laissé à 14px sauf sur focus qui changé en 16px et il n'a pas corrigé le problème de zoom avec iOS8. Au moins sur mon iPhone en utilisant iOS8, la taille de police doit être 16px avant focus pour que l'iPhone ne zoome pas la page.

j'ai fait ceci, aussi 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 police 16px casse le design.

cela a fonctionné pour moi:

input, textarea {
    font-size: initial;
}

après un certain temps de tout en essayant 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 jeux de police-taille de l'entrée de 16px. Cela permettra d'éviter le zoom. Sur l'événement de mise au point, il change la taille de la police de nouveau à la valeur initiale.

Contrairement aux solutions affichées avant, cela vous permettra de définir la taille de police de l'entrée à ce que vous voulez.

après avoir lu presque chaque ligne ici et tester les différentes solutions, c'est, grâce à tous ceux qui ont partagé leurs solutions, ce que j'ai trouvé, testé et travailler 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 a quelques inconvénients, bien que, de manière notable un "saut" en raison du changement rapide de taille de police qui se produit entre les États"hover "ed et"focus" ed-et l'impact redessiné sur la performance

je vois des gens ici faire des choses étranges avec JavaScript ou la fonction viewport et désactiver manuellement tous les zooms sur les appareils. Cela ne devrait pas être une solution à mon avis. En ajoutant cet extrait CSS, vous désactiverez le zoom automatique dans iOS sans changer votre taille de police pour un nombre fixe comme 16px.

par défaut, j'utilise la taille de police 93.8% (15px) aux champs d'entrée et en ajoutant mon fragment CSS cela reste à 93.8%. Pas besoin de passer à 16px ou d'en faire un nombre fixe.

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

définir une taille de police (pour les champs d'entrée) égale à la taille de police du corps, semble être ce qui empêche le navigateur de zoomer. Je suggère d'utiliser font-size: 1rem comme solution plus élégante.

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

Zooming est désactivé dès qu'une entrée de texte est fucused et ré-anabled lorsque l'entrée est laissée.

Note: certains utilisateurs ne peuvent pas apprechiate é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 pendant l'édition (voir code 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 modifiera la taille du texte d'une entrée à 16 pixels (calculée, c.-à-d. dans la taille de zoom actuelle) pendant que l'élément a le foyer. iPhone ne sera donc pas automatiquement zoom-in.

Note: le facteur de zoom est calculé à partir de window.affichage d'innerWidth et iPhone avec 320 pixels. Ce sera seulement être valide pour 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>

Based on Stephen's answer ... Ce code fonctionne sans changer la taille de police des entrées sur focus (qui semble boiteux), plus il fonctionne toujours avec FastClick , que je suggère d'ajouter à tous les sites mobiles pour aider à apporter le "snappy". Réglez la largeur de votre "viewport" 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 réponse du haut sur le réglage de la taille de police à 16px demandé comment c'est une solution, et si vous voulez plus/plus petite police.

Je ne sais pas pour vous tous, mais utiliser px pour les tailles de police n'est pas la meilleure façon de faire, vous devriez utiliser em.

j'ai rencontré ce problème sur mon site responsive où mon champ de texte est plus grand que 16 pixels. J'ai eu mon conteneur de formulaire réglé à 2rem et mon champ d'entrée réglé à 1,4 em. Dans Mes requêtes mobiles Je change html taille de police en fonction de la fenêtre d'affichage. Puisque le html par défaut est 10, mon champ d'entrée calcule à 28px sur le bureau

pour supprimer le zoom automatique, j'ai dû changer mon entrée à 1,6 em. Cela a augmenté ma taille de police à 32px. Un peu plus et à peine perceptible. Sur mon iPhone 4 & 5 je change ma taille de police html à 15px pour portrait et retour à 10px pour landscape. Il semble que le point doux pour cette taille de pixel était 48px, c'est pourquoi je suis passé de 1.4 em (42px) à 1.6 em (48px).

la chose que vous devez faire est de trouver le point doux Sur font-size et puis le convertir à l'envers dans vos tailles rem/em.

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

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

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

Il m'a fallu un certain temps pour le trouver, mais voici le 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));
});

soit dit en passant, si vous utilisez Bootstrap , vous pouvez simplement utiliser cette variante:

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

j'ai dû" corriger " le zoom automatique sur les contrôles de formulaires pour un site web d'une université néerlandaise (qui utilisait 15px dans les contrôles de formulaires). J'ai proposé la série suivante d'exigences:

• l'utilisateur doit encore pouvoir zoomer sur
• font-size doit rester la même
• flashs de temporaire de différents style
• pas de jQuery exigence
• doit travailler sur les plus récents iOS et ne pas entraver toute autre combinaison OS / dispositif
• si possible pas de temporisation magique, et si nécessaire correctement Effacer les minuteries

C'est 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 sur quelques autres versions bientôt
• l'utilisation d'événements focalisés signifie qu'elle nécessite au moins iOS 5.1 (mais je vois des sites que nous construisons en travaillant dans des versions iOS plus anciennes que 9 comme un bonus cool de toute façon)
• utiliser event-delegation parce que beaucoup de sites sur lesquels je travaille ont des pages qui pourraient dynamiquement créer des contrôles de forme
• paramétrage des event listeners à l'élément html (documentElement) de manière à ne pas avoir à attendre que le corps soit disponible (ne vous donnez pas la peine de vérifier si le document est prêt / chargé ou d'attendre L'événement DOMContentLoaded))

C'EST LE TRAVAIL!!! JE TERMINE MON VOYAGE DE RECHERCHE!

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

testé sur iPhone OS6 , Android 2.3.3 émulateur

j'ai un site web mobile qui a une largeur fixe de 640px, et je faisais face à l'autozoom sur focus to.

j'étais en train d'essayer un lot de slutions mais aucun ne fonctionnait à la fois sur iPhone et Android!

maintenant pour moi c'est ok de désactiver le zoom parce que le site Web était mobile-premier design!

c'est là que je le trouve: Comment faire viewport dimensionnement et mise à l'échelle pour le soutien de navigateur croisé?