Deaktivieren Sie die automatische Vergrößerung des Eingabe-Tags "Text" - Safari auf dem iPhone

Ich habe eine HTML-Seite erstellt, die ein <input>Tag mit enthält type="text". Wenn ich mit Safari auf dem iPhone darauf klicke, wird die Seite größer (automatischer Zoom). Weiß jemand, wie man das deaktiviert?

Der Browser zoomt, wenn die Schriftgröße kleiner als 16pxund die Standardschriftgröße für Formularelemente ist 11px(zumindest in Chrome und Safari).

Zusätzlich muss dem selectElement die focusPseudoklasse zugeordnet sein.

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

Es ist nicht notwendig , alle oben zu verwenden, kann man einfach Stil Elemente , die Sie benötigen, zB: nur text, numberund textarea:

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

Alternative Lösung, um die Eingabeelemente von einem übergeordneten Stil erben zu lassen:

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

Sie können verhindern, dass Safari während der Benutzereingabe automatisch in Textfelder hineinzoomt, ohne die Fähigkeit des Benutzers zu deaktivieren, den Zoom einzuschränken. Fügen Sie einfach maximum-scale=1das in anderen Antworten vorgeschlagene Attribut für die Benutzerskala hinzu , lassen Sie es jedoch weg.

Es ist eine lohnende Option, wenn Sie ein Formular in einer Ebene haben, das beim Zoomen „schwebt“, was dazu führen kann, dass wichtige Elemente der Benutzeroberfläche vom Bildschirm verschoben werden.

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

Neu: IOS zoomt weiterhin, es sei denn, Sie verwenden 16px für den Eingang ohne Fokus.

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

Ich habe einen Hintergrund hinzugefügt, da IOS der Auswahl keinen Hintergrund hinzufügt.

Wenn Ihre Website für ein mobiles Gerät geeignet ist, können Sie entscheiden, die Skalierung nicht zuzulassen.

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

Dies löst das Problem, dass Ihre mobile Seite oder Ihr Formular herumschwebt.

Zusammenfassend lautet die Antwort: Stellen Sie die Schriftgröße der Formularelemente auf mindestens 16 Pixel ein

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

Der richtige Weg, um dieses Problem zu beheben, besteht darin, das Meta-Ansichtsfenster in Folgendes zu ändern:

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

Es gibt keinen sauberen Weg, den ich finden könnte, aber hier ist ein Hack ...

1) Ich habe festgestellt, dass das Mouseover-Ereignis vor dem Zoomen erfolgt, das Zoomen jedoch vor dem Herunterfahren oder Fokussieren.

2) Sie können das META-Ansichtsfenster-Tag mithilfe von Javascript dynamisch ändern (siehe Aktivieren / Deaktivieren des Zooms auf der iPhone-Safari mit Javascript? )

Versuchen Sie dies also (in jquery für Kompaktheit gezeigt):

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

Dies ist definitiv ein Hack ... es kann Situationen geben, in denen Mouseover / Down nicht immer Ein- / Ausgänge abfängt, aber es hat in meinen Tests gut funktioniert und ist ein solider Anfang.

Fügen Sie dem Ansichtsfenster Meta wie folgt benutzerskalierbar = 0 hinzu

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

Arbeitete für mich :)

Ich musste kürzlich (heute: D) dieses Verhalten integrieren. Um die ursprünglichen Entwurfsfelder, einschließlich der Kombination, nicht zu beeinflussen, habe ich mich dafür entschieden, die Transformation im Fokus des Felds anzuwenden:

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

Wie viele andere Antworten bereits gezeigt haben, kann dies durch Hinzufügen maximum-scalezum Meta- viewportTag erreicht werden. Dies hat jedoch die negative Folge, dass der Benutzerzoom auf Android-Geräten deaktiviert wird . ( Der Benutzerzoom auf iOS-Geräten wird seit Version 10 nicht mehr deaktiviert .)

Wir können JavaScript verwenden, um maximum-scaledas Meta dynamisch zu erweitern, viewportwenn das Gerät iOS ist. Damit wird das Beste aus beiden Welten erreicht: Wir ermöglichen dem Benutzer das Zoomen und verhindern, dass iOS fokussiert in Textfelder zoomt.

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

Javascript-Hack, der unter iOS 7 funktioniert. Dies basiert auf der Antwort von @dlo, aber Mouseover- und Mouseout-Ereignisse werden durch Touchstart- und Touchend-Ereignisse ersetzt. Grundsätzlich fügt dieses Skript eine Zeitüberschreitung von einer halben Sekunde hinzu, bevor der Zoom wieder aktiviert wird, um das Zoomen zu verhindern.

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

Das hat bei mir funktioniert:

input, textarea {
    font-size: initial;
}

Ich habe Christinas Lösung oben verwendet, aber mit einer kleinen Modifikation für Bootstrap und einer anderen Regel, die auf Desktop-Computer angewendet werden soll. Die Standardschriftgröße von Bootstrap beträgt 14 Pixel, wodurch der Zoom verursacht wird. Im Folgenden wird es für "Formularsteuerelemente" in Bootstrap auf 16px geändert, wodurch das Zoomen verhindert wird.

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

Und zurück zu 14px für nicht mobile Browser.

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

Ich habe versucht, .form-control: focus zu verwenden, wodurch es bei 14px blieb, außer bei focus, bei dem es auf 16px geändert wurde und das Zoomproblem mit iOS8 nicht behoben wurde. Zumindest auf meinem iPhone mit iOS8 muss die Schriftgröße vor dem Fokus 16 Pixel betragen, damit das iPhone die Seite nicht vergrößert.

Ich habe das auch mit jQuery gemacht:

$('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 müssen möglicherweise einige andere Elemente in der Benutzeroberfläche angepasst werden, wenn diese 16pxSchriftgröße das Design beeinträchtigt.

Nach einer Weile des Versuchs kam ich auf diese 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 = "";
});

Bei "Mousedown" wird die Schriftgröße der Eingabe auf 16 Pixel festgelegt. Dies verhindert das Zoomen. Beim Fokusereignis wird die Schriftgröße auf den Anfangswert zurückgesetzt.

Im Gegensatz zu zuvor veröffentlichten Lösungen können Sie hier die Schriftgröße der Eingabe auf die gewünschten Werte einstellen.

Nachdem ich hier fast jede einzelne Zeile gelesen und die verschiedenen Lösungen getestet habe, habe ich dank all derer, die ihre Lösungen geteilt haben, das iPhone 7 iOS 10.x entwickelt, für mich getestet und für mich gearbeitet:

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

Es hat jedoch einige Nachteile, nämlich einen deutlichen "Sprung" als Ergebnis der schnellen Änderung der Schriftgröße zwischen den Zuständen "Hover" und "Focus" - und der Auswirkung des Neuzeichnens auf die Leistung

Inspiriert von der Antwort von @jirikuchta, habe ich dieses Problem gelöst, indem ich dieses bisschen CSS hinzugefügt habe:

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

Kein JS, und ich bemerke keinen Blitz oder so.

Es ist erwähnenswert, dass a viewportwith maximum-scale=1auch funktioniert, aber nicht, wenn die Seite als Iframe geladen wird oder wenn Sie ein anderes Skript haben, das das viewportusw. ändert .

Pseudoelemente wie :focusfunktionieren nicht mehr so ​​wie früher. Ab iOS 11 kann vor Ihren Hauptstilen eine einfache Rücksetzdeklaration hinzugefügt werden (vorausgesetzt, Sie überschreiben sie nicht mit einer kleineren Schriftgröße).

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

Es ist erwähnenswert, dass es für CSS-Bibliotheken wie Tachyons.css leicht ist, versehentlich Ihre Schriftgröße zu überschreiben.

Zum Beispiel ist class: f5äquivalent zu:, fontSize: 1remwas in Ordnung ist, wenn Sie die Standardgröße für die Körperschrift beibehalten haben.

Allerdings: Wenn Sie die Schriftgrößenklasse wählen: f6Dies entspricht fontSize: .875remeiner kleinen Anzeige nach oben. In diesem Fall müssen Sie Ihre Reset-Deklarationen genauer festlegen:

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

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

/* not small */

}

Übrigens, wenn Sie Bootstrap verwenden , können Sie einfach diese Variante verwenden:

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

Ich musste das Problem des automatischen Zooms in Formularsteuerelemente für eine Website der niederländischen Universität (die 15px in Formularsteuerelementen verwendete) "beheben". Ich habe mir folgende Anforderungen ausgedacht:

• Der Benutzer muss weiterhin zoomen können
• Die Schriftgröße muss gleich bleiben
• Keine vorübergehenden unterschiedlichen Stile
• Keine jQuery-Anforderung
• muss auf dem neuesten iOS funktionieren und darf keine andere Kombination aus Betriebssystem und Gerät behindern
• wenn möglich keine magischen Timeouts, und bei Bedarf Timer richtig löschen

Das habe ich mir bisher ausgedacht:

/*
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 Notizen:

• Beachten Sie, dass ich es bisher nur unter iOS 11.3.1 getestet habe, es aber bald auf einigen anderen Versionen testen werde
• Die Verwendung von focusIn-Ereignissen bedeutet, dass mindestens iOS 5.1 erforderlich ist (aber ich sehe Websites, die wir in iOS-Versionen ab 9 erstellen, trotzdem als coolen Bonus).
• Verwenden der Ereignisdelegierung, da viele Websites, an denen ich arbeite, Seiten haben, auf denen möglicherweise dynamisch Formularsteuerelemente erstellt werden
• Festlegen der eventListeners auf das HTML-Element (documentElement), damit nicht auf die Verfügbarkeit des Körpers gewartet werden muss (Sie müssen nicht prüfen, ob das Dokument bereit / geladen ist oder auf das Ereignis DOMContentLoaded warten muss).

Anstatt einfach die Schriftgröße auf 16px einzustellen, können Sie:

1. Gestalten Sie das Eingabefeld so, dass es größer als die beabsichtigte Größe ist, sodass die logische Schriftgröße auf 16 Pixel festgelegt werden kann.
2. Verwenden Sie die scale()CSS-Transformation und die negativen Ränder, um das Eingabefeld auf die richtige Größe zu verkleinern.

Angenommen, Ihr Eingabefeld ist ursprünglich so gestaltet:

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

Wenn Sie das Feld vergrößern, indem Sie alle Dimensionen um 16/12 = 133,33% erhöhen, und dann um 12/16 scale()= 75% reduzieren , hat das Eingabefeld die richtige visuelle Größe (und Schriftgröße) und es wird nicht vergrößert Fokus.

Da sich dies scale()nur auf die visuelle Größe auswirkt, müssen Sie auch negative Ränder hinzufügen, um die logische Größe des Felds zu verringern.

Mit diesem 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%;
}

Das Eingabefeld hat eine logische Schriftgröße von 16 Pixel und scheint 12 Pixel Text zu haben.

Ich habe einen Blog-Beitrag, in dem ich etwas detaillierter vorgehe, und dieses Beispiel als sichtbares HTML:
Kein Eingabezoom in Safari auf dem iPhone, pixelgenau

Trotz dieser Antworten habe ich drei Tage gebraucht, um herauszufinden, was los war, und möglicherweise brauche ich die Lösung in Zukunft erneut.

Meine Situation war etwas anders als die beschriebene.

In meinem hatte ich einen inhaltsbearbeitbaren Text in einem Div auf der Seite. Wenn der Benutzer auf ein VERSCHIEDENES div, eine Art Schaltfläche, klickte, wählte ich automatisch einen Text im inhaltsbearbeitbaren div (einem zuvor gespeicherten und gelöschten Auswahlbereich) aus, führte einen Rich-Text-ExecCommand für diese Auswahl aus und löschte ihn erneut.

Dies ermöglichte es mir, Textfarben basierend auf Benutzerinteraktionen mit Farbdivs an anderer Stelle auf der Seite unsichtbar zu ändern, während die Auswahl normalerweise ausgeblendet blieb, damit sie die Farben im richtigen Kontext sehen konnten.

Nun, auf der Safari des iPad führte das Klicken auf das Farbdiv. Dazu, dass die Bildschirmtastatur angezeigt wurde, und nichts, was ich getan habe, würde dies verhindern.

Ich habe endlich herausgefunden, wie das iPad das macht.

Es wartet auf eine Touchstart- und Touchend-Sequenz, die eine Auswahl an bearbeitbarem Text auslöst.

Wenn diese Kombination auftritt, wird die Bildschirmtastatur angezeigt.

Tatsächlich wird ein Dolly-Zoom ausgeführt, bei dem die zugrunde liegende Seite erweitert wird, während der bearbeitbare Text vergrößert wird. Ich brauchte einen Tag, um zu verstehen, was ich sah.

Die Lösung, die ich verwendet habe, bestand darin, sowohl Touchstart als auch Touchend für diese bestimmten Farbdivs abzufangen. In beiden Handlern stoppe ich die Ausbreitung und das Sprudeln und gebe false zurück. Aber im Touchend-Ereignis löse ich das gleiche Verhalten aus, das durch Klicken ausgelöst wurde.

Zuvor löste Safari das aus, was ich für "Touchstart", "Mousedown", "Touchend", "Mouseup", "Click" und aufgrund meines Codes eine Textauswahl in dieser Reihenfolge hielt.

Die neue Sequenz aufgrund der Abschnitte ist einfach die Textauswahl. Alles andere wird abgefangen, bevor Safari es verarbeiten und seine Tastaturaufgaben erledigen kann. Die Abschnitte Touchstart und Touchend verhindern, dass auch Mausereignisse ausgelöst werden, und im Kontext ist dies völlig in Ordnung.

Ich kenne keinen einfacheren Weg, dies zu beschreiben, aber ich denke, es ist wichtig, es hier zu haben, da ich diesen Thread innerhalb einer Stunde nach dem ersten Auftreten des Problems gefunden habe.

Ich bin zu 98% sicher, dass das gleiche Update mit Eingabefeldern und allem anderen funktioniert. Fangen Sie die Berührungsereignisse ab und verarbeiten Sie sie separat, ohne dass sie sich ausbreiten oder sprudeln. Ziehen Sie nach einer kurzen Zeitspanne eine Auswahl vor, um sicherzustellen, dass Safari die Sequenz nicht als Tastaturauslöser erkennt.

Ich sehe Leute hier, die seltsame Dinge mit JavaScript oder der Ansichtsfensterfunktion tun und das manuelle Zoomen auf Geräten deaktivieren. Das sollte meiner Meinung nach keine Lösung sein. Durch Hinzufügen dieses CSS-Snippets wird der automatische Zoom in iOS deaktiviert, ohne dass die Schriftgröße auf eine feste Zahl wie 16 Pixel geändert wird.

Standardmäßig verwende ich bei Eingabefeldern eine Schriftgröße von 93,8% (15 Pixel). Durch Hinzufügen meines CSS-Snippets bleibt diese bei 93,8%. Sie müssen nicht auf 16px wechseln oder eine feste Nummer festlegen.

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

Das Festlegen einer Schriftgröße (für Eingabefelder), die der Schriftgröße des Körpers entspricht, scheint zu verhindern, dass der Browser heraus- oder hineinzoomt. Ich würde vorschlagen, sie font-size: 1remals elegantere Lösung zu verwenden.

Da das automatische Vergrößern (ohne Verkleinern) auf dem iPhone immer noch unangenehm ist, finden Sie hier ein JavaScript, das auf dem Vorschlag von dlo basiert, mit Fokus / Unschärfe zu arbeiten.

Das Zoomen ist deaktiviert, sobald eine Texteingabe verschmolzen und wieder aktiviert wird, wenn die Eingabe verlassen wird.

Hinweis: Einige Benutzer schätzen die Bearbeitung von Texten in einer kleinen Texteingabe möglicherweise nicht! Daher ziehe ich es persönlich vor, die Textgröße der Eingabe während der Bearbeitung zu ändern (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>

Der folgende Code ändert die Textgröße einer Eingabe auf 16 Pixel (berechnet, dh in der aktuellen Zoomgröße), während das Element den Fokus hat. Das iPhone wird daher nicht automatisch vergrößert.

Hinweis: Der Zoomfaktor wird basierend auf window.innerWidth und dem iPhone-Display mit 320 Pixel berechnet. Dies gilt nur für das iPhone im Hochformat.

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

Ich habe eine Weile gebraucht, um es zu finden, aber hier ist der beste Code, den ich gefunden habe ...... 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));
});

Basierend auf Stephen Walshs Antwort ... Dieser Code funktioniert, ohne die Schriftgröße der Eingaben im Fokus zu ändern (was lahm aussieht), und funktioniert weiterhin mit FastClick , das ich allen mobilen Websites hinzufügen möchte , um das "Bissige" zu erreichen. Passen Sie Ihre "Ansichtsfensterbreite" an Ihre Bedürfnisse an.

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

In einem Kommentar zur Top-Antwort zum Festlegen der Schriftgröße auf 16 Pixel wurde gefragt, wie dies eine Lösung ist. Was ist, wenn Sie eine größere / kleinere Schriftart wünschen?

Ich weiß nicht alles über Sie, aber die Verwendung von px für Schriftgrößen ist nicht der beste Weg. Sie sollten sie verwenden.

Ich bin auf meiner reaktionsfähigen Website auf dieses Problem gestoßen, bei der mein Textfeld größer als 16 Pixel ist. Ich hatte meinen Formularcontainer auf 2rem und mein Eingabefeld auf 1.4em gesetzt. In meinen mobilen Abfragen ändere ich die HTML-Schriftgröße je nach Ansichtsfenster. Da der Standard-HTML-Wert 10 ist, wird mein Eingabefeld auf dem Desktop auf 28 Pixel berechnet

Um den automatischen Zoom zu entfernen, musste ich meine Eingabe auf 1.6em ändern. Dies erhöhte meine Schriftgröße auf 32px. Nur etwas höher und kaum wahrnehmbar. Auf meinem iPhone 4 & 5 ändere ich meine HTML-Schriftgröße für Hochformat auf 15 Pixel und für Querformat zurück auf 10 Pixel. Es schien, dass der Sweet Spot für diese Pixelgröße 48px war, weshalb ich von 1.4em (42px) auf 1.6em (48px) gewechselt bin.

Das, was Sie tun müssen, ist, den Sweet Spot in der Schriftgröße zu finden und ihn dann in Ihre Rem / Em-Größen rückwärts zu konvertieren.

Hier ist ein Hack, den ich für eines meiner Projekte verwendet habe:

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

Endete mit den anfänglichen Stilen und Maßstäben, die ich wollte, aber ohne Fokuszoom.