Désactiver le zoom automatique dans la balise “Text” d’entrée – Safari sur iPhone

J’ai créé une page HTML avec une avec type="text" . Lorsque je clique dessus en utilisant Safari sur iPhone, la page devient plus grande (zoom automatique). Est-ce que quelqu’un sait comment désactiver cela?

Le navigateur zoomera si la taille de la police est inférieure à 16px et la taille de la 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 associé à 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 styler les éléments dont vous avez besoin, par exemple: juste du text , un number et une zone de 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; } 
 @media screen and (-webkit-min-device-pixel-ratio:0) { select:focus, textarea:focus, input:focus { font-size: 16px; background: #eee; } } 

Nouveau: IOS continuera à 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 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.

  

Cela résout le problème que votre page ou formulaire mobile va “flotter” autour.

En résumé, la réponse est la suivante: définir la taille de la police des éléments de formulaire à au moins 16px

À partir d’iOS 10 (ou peut-être même avant), 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é de pincement du zoom. Ajoutez simplement maximum-scale=1 mais laissez de côté l’atsortingbut user-scale suggéré dans les autres réponses.

C’est une option intéressante si vous avez un formulaire dans un calque qui «flotte» autour d’un zoom, ce qui peut entraîner le déplacement des éléments importants de l’interface utilisateur.

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

La façon correcte de résoudre ce problème consiste à modifier la méta-fenêtre pour:

  

Il n’y a pas de moyen propre que je puisse trouver, mais voici un hack …

1) J’ai remarqué que l’événement mouseover se produit avant le zoom, mais le zoom se produit avant les événements de souris ou de focus.

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

Alors, essayez ceci (montré en jquery pour la compacité):

 $("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable); function zoomDisable(){ $('head meta[name=viewport]').remove(); $('head').prepend(''); } function zoomEnable(){ $('head meta[name=viewport]').remove(); $('head').prepend(''); } 

C’est vraiment un hack … il peut y avoir des situations où mouseover / down n’attrape pas toujours les entrées / sorties, mais cela a bien fonctionné dans mes tests et est un bon début.

J’ai récemment (aujourd’hui: D) dû intégrer ce comportement. Afin de ne pas affecter les champs de conception d’origine, y compris les combos, j’ai opté pour appliquer la transformation au centre du champ:

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

Ajouter user-scalable = 0 à la fenêtre de la fenêtre d’affichage comme suit

  

Travaillé pour moi 🙂

Le piratage Javascript fonctionne sur iOS 7. Il est basé sur la réponse de @dlo mais les événements mouseover et mouseout sont remplacés par des é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(''); } function zoomEnable(){ $('head meta[name=viewport]').remove(); $('head').prepend(''); } 

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 change à 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 retour à 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 le focus qui l’a changé à 16px et il n’a pas résolu le problème de zoom avec iOS8. Au moins sur mon iPhone en utilisant iOS8, la taille de la police doit être 16px avant la mise au point pour l’iPhone pour ne pas zoomer sur la page.

J’ai fait ça 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 entendu, certains autres éléments de l’interface peuvent devoir être adaptés si cette taille de police de 16px rompt la conception.

Cela a fonctionné pour moi:

 input, textarea { font-size: initial; } 

Au bout d’un moment, j’ai essayé 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 la police à 16px. Cela empêchera le zoom. Lors d’un événement de focus, la taille de la police est remplacée par la valeur initiale.

Contrairement aux solutions publiées précédemment, cela vous permettra de définir la taille de la police pour l’entrée de votre choix.

Après avoir lu presque chaque ligne ici et testé les différentes solutions, c’est 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 a quelques inconvénients, cependant, sensiblement un “saut” en raison du changement rapide de la taille de la police qui se produit entre les états “hover” ed et “focus” – et l’impact de redessiner sur les performances

Je vois des gens ici faire des choses étranges avec JavaScript ou la fonction viewport et désactiver tous les zooms manuels sur les appareils. Cela ne devrait pas être une solution à mon avis. L’ajout de cet extrait CSS désactive 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 fragment CSS, cela rest à 93,8%. Pas besoin de changer pour 16px ou 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 de saisie) égale à la taille de la police du corps semble être ce qui empêche le navigateur d’effectuer un zoom avant ou arrière. Je suggère d’utiliser font-size: 1rem comme solution plus élégante.

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

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

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

  

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é sur la base de window.innerWidth et de l’écran de l’iPhone avec 320 pixels. Cela ne sera valable que pour l’iPhone en mode portrait.

  

Basé sur la réponse de Stephen Walsh … Ce code fonctionne sans changer la taille de la police des entrées sur focus (ce qui semble abasourdi), et il fonctionne toujours avec FastClick , que je suggère d’append à tous les sites mobiles pour apporter le “snappy”. Ajustez votre “largeur de fenêtre” selon 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 sur la meilleure réponse concernant la définition de la taille de la police sur 16px demandait comment cela était une solution, et si vous souhaitiez une police plus grande / plus petite.

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 supérieur à 16 pixels. Mon conteneur de formulaires était défini sur 2rem et mon champ de saisie était défini sur 1.4em. Dans mes requêtes mobiles, je change la taille de la police HTML en fonction de la fenêtre d’affichage. Comme le code HTML par défaut est 10, mon champ de saisie calcule à 28px sur le bureau

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

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

Voici un hack utilisé sur un de mes projets:

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

Terminé avec les styles initiaux et l’échelle que je voulais, mais pas de zoom sur la mise au point.

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)); }); 

Au fait, si vous utilisez Bootstrap , vous pouvez simplement utiliser cette variante:

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

J’ai dû “corriger” le zoom automatique sur la question des contrôles de formulaire pour un site web de l’université néerlandaise (qui utilisait 15px dans les contrôles de formulaire). Je suis arrivé avec les exigences suivantes:

  • l’utilisateur doit toujours être capable de zoomer
  • la taille de la police doit restr la même
  • pas de flash de style temporairement différent
  • aucune exigence jQuery
  • doit fonctionner sur iOS le plus récent et ne gêner aucune autre combinaison OS / périphérique
  • si possible pas de timeouts magiques, et si nécessaire effacer correctement les minuteurs

C’est ce que j’ai inventé jusqu’ici:

 /* 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.getAtsortingbute("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  element function setViewport(newvalue) { let vpnode = document.documentElement.querySelector('head meta[name="viewport"]'); if (vpnode) vpnode.setAtsortingbute("content",newvalue); else { vpnode = document.createElement("meta"); vpnode.setAtsortingbute("name", "viewport"); vpnode.setAtsortingbute("content", newvalue); } } 

Quelques notes:

  • Notez que jusqu’à présent je l’ai seulement testé sur iOS 11.3.1, mais que je le testerai bientôt sur quelques autres versions
  • L’utilisation de focusIn events signifie qu’il nécessite au moins iOS 5.1 (mais je vois de toute façon que les sites que nous construisons fonctionnent avec des versions iOS antérieures à 9 comme bonus)
  • Utilisation de la délégation d’événements car de nombreux sites sur lesquels je travaille ont des pages susceptibles de créer des contrôles de formulaire de manière dynamic
  • Définir les eventListeners à l’élément html (documentElement) afin de ne pas avoir à attendre que le corps soit disponible (ne pas vouloir vérifier si le document a l’état prêt / chargé ou devoir attendre l’événement DOMContentLoaded)

C’EST DU TRAVAIL!!! Je finis mon voyage de recherche!

testé sur iPhone OS6 , émulateur Android 2.3.3

J’ai un site Web mobile qui a une largeur fixe de 640px, et je faisais face à l’autozoom sur.

J’essayais d’atsortingbuer des slutions mais aucune ne fonctionnait sur iPhone et Android!

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

c’est là que je le trouve: comment dimensionner et redimensionner la fenêtre d’affichage pour la prise en charge de plusieurs navigateurs?