Deaktivieren Sie Auto-Zoom in Eingabe "Text" -Tag - Safari auf dem iPhone

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

Neu: IOS wird sich noch vergrößern, es sei denn, Sie verwenden 16px an den Eingang, ohne den Fokus.

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

Ich habe einen hintergrund seit IOS fügt keinen hintergrund auswählen.

InformationsquelleAutor der Antwort Christina

Zusammenfassend die Antwort ist: legen Sie die Schriftgröße der Elemente bilden, zu mindestens 16px

InformationsquelleAutor der Antwort Nik

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

InformationsquelleAutor der Antwort stormsweeper

Ich habe vor kurzem (heute :D) zu integrieren hatten dieses Verhalten. Um keine Auswirkungen auf die original-design-Bereichen, einschließlich combo, entschied ich mich zum anwenden der transformation auf den Mittelpunkt des Feldes:

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

InformationsquelleAutor der Antwort piouPiouM

Javascript-hack die arbeiten an iOS 7. Dies basiert auf der @dlo 's beantworten, aber die mouseover-und mouseout-Ereignisse werden ersetzt durch touchstart und touchend. Im Grunde dieses script fügen Sie eine halbe Sekunde timeout, bevor Sie die zoom-würde wieder aktiviert, um zu verhindern, dass Zoomen.

$("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" />');
} 

InformationsquelleAutor der Antwort Ilkka R.

Habe ich diese, auch mit 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'));
});

Natürlich, einige andere Elemente in der Benutzeroberfläche kann angepasst werden, wenn dies 16px font-size bricht das design.

InformationsquelleAutor der Antwort Nicolas Hoizey

Nach einer Weile, während Sie versuchen kam ich mit dieser Lösung

//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 = "";
});

Auf "mousedown" er setzt die font-size von input-auf 16px. Dies verhindert, dass das Zoomen. Auf focus-Ereignis ändert er die schriftart-Größe zurück auf den Anfangswert.

Im Gegensatz zu Lösungen gepostet vor, wird diese ermöglichen es Ihnen, die schriftart,-Größe der Eingabe, was Sie wollen.

InformationsquelleAutor der Antwort jirikuchta

Sehe ich die Menschen hier tun seltsame Dinge mit JavaScript oder die viewport-Funktion ein-und ausschalten alle manuell Zoomen: auf Geräten.
Das sollte nicht die Lösung sein meiner Meinung nach. Das hinzufügen dieser CSS-Schnipsel wird, schalten Sie den auto-zoom in iOS ohne änderung der font-Größe auf eine Feste Zahl wie etwa 16px.

Standardmäßig verwende ich 93.8% (15px) Schriftgröße bei Eingabefeldern und durch das hinzufügen meiner CSS-snippet, das bleibt bei 93.8%. Keine Notwendigkeit zu ändern, 16px oder machen Sie eine Feste Anzahl.

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

InformationsquelleAutor der Antwort Jack Ottermans

Als die automatische zoom-in (ohne zoom-out) ist immer noch annonying auf dem iPhone, hier ist eine JavaScript basierte auf dlo-Vorschlag, die Zusammenarbeit mit focus/blur.

Zoom wird deaktiviert, sobald eine Texteingabe fucused und re-anabled, wenn der Eingang ist Links.

Hinweis: Einige Benutzer möglicherweise nicht apprechiate die Bearbeitung von Texten in ein kleines text-input! Also, ich persönlich bevorzuge zum ändern der input-text-Größe während der Bearbeitung (siehe code unten).

<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>

Den folgenden code ändern eine Eingabe der Schriftgröße auf 16 pixel (berechnet, d.h., in die aktuelle zoom-Größe), während das element den Fokus hat. das iPhone wird also nicht automatisch zoom-in.

Hinweis: Der zoom-Faktor wird berechnet basierend auf Fenster.innerWidth-und iPhone-display mit 320 Pixel. Dies wird nur gültig für das iPhone in den portrait-Modus.

<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>

InformationsquelleAutor der Antwort BurninLeo

Einen Kommentar für die top-Antwort über die Einstellung der Schriftgröße auf 16px gefragt, wie das ist eine Lösung, welche, wenn Sie möchten, größere/kleinere Schrift.

Ich don T wissen über Sie alle, aber mit px für Schriftgrößen ist nicht der beste Weg zu gehen, sollten Sie mit em.

Ich lief in dieser Frage auf meiner responsive Website, wo mein text-Feld größer als 16 Pixel. Ich hatte meine form-container eingestellt 2rem und mein input-Feld auf 1.4 em. In meinem Handy Abfragen die ich ändern der html-schriftart,-Größe, je nach viewport. Da die Standard-html ist 10, mein input-Feld berechnet zu 28px auf desktop

Entfernen Sie die auto-zoom, musste ich meinen input zu 1,6 em. Dies erhöht meine schriftart-Größe 32px. Nur etwas höher und kaum zu spüren. Auf meinem iPhone 4&5 ich mein html-Schriftgröße auf 15px für Porträt-und zurück 10px für die Landschaft. Es appeard, dass der sweet-spot für dieses pixel Größe war 48px das ist der Grund, warum ich gewechselt von 1.4 em (42px) 1.6 em (48px).

Dem, was Sie tun müssen ist, finden den sweet spot auf schriftart,-Größe und konvertieren Sie es dann rückwärts in Ihr rem/em Größen.

InformationsquelleAutor der Antwort Jon Tinsman

Es dauerte eine Weile, um es zu finden aber hier ist der beste code, den ich gefunden......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));
});

InformationsquelleAutor der Antwort Stephen Walsh

Ich habe zu "reparieren" die auto-zoom-in-form-Steuerelemente Problem für eine Niederländische website der Universität (die verwendet 15px in Formular-Steuerelemente). Ich kam mit der folgenden Anforderungen:

• muss der Benutzer noch in der Lage, zoom in
• font-size muss das gleiche bleiben
• keine Blitze von temporären verschiedenen styling
• kein jQuery Anforderung
• arbeiten muss, neuestes iOS und nicht behindern andere OS/Geräte-Kombination
• wenn möglich keine Magie timeouts, und wenn nötig richtig klar-Timer

Dies ist, was ich kam mit so weit:

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

Einige Hinweise:

• Hinweis, ich habe bisher nur getestet auf iOS 11.3.1, aber werde es testen, in ein paar anderen Versionen bald
• Verwendung von focusIn events bedeutet, es erfordert mindestens iOS 5.1 (aber das sehe ich Webseiten, die wir bauen, arbeiten in der iOS-Versionen, die älter als 9 als coolen bonus sowieso)
• Mit Hilfe von event-delegation, weil eine Menge von Websites arbeite ich auf Seiten, die möglicherweise dynamisch Formular-Steuerelemente erstellen
• Einstellung des eventListeners auf das html-element (documentElement), so dass Sie nicht haben, zu warten, für den Körper verfügbar werden (nicht die Mühe machen möchten überprüfen, wenn das Dokument bereit/geladen Staat oder müssen warten, bis das DOMContentLoaded-Ereignis)

InformationsquelleAutor der Antwort Mark de Jong