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

540

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?

Eduardo Montenegro
quelle
8
Für alle Twitter Bootstrap- Benutzer, die hier landen: Siehe auch dieses Github-Problem .
Jeroen
7
Ich denke, @daxmacrog antwortet genau auf das, was Sie wollen. Sind Sie bereit, es zu akzeptieren, damit es an die Spitze kommt und den Leuten, die all dies lesen, viel Nacharbeit erspart? 2018 Antwort: stackoverflow.com/a/46254706/172651
Evolve
@Evolve die Antwort, die Sie über Pausen Android Pinch und Zoom-Funktion gesprochen haben. daxmacrog Antwort ist fehlerhaft.
MH
4
Ich schwöre, Apple erstellt diese Anti-Funktionen, nur um mit unseren Köpfen zu spielen.
Andrew Koster
@ AndrewKoster, ich stimme dir auch jetzt im Jahr 2020 zu.
Ashok

Antworten:

492

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;
}
Srikanth
quelle
81
Nur um alles abzudecken: select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 16px; }
Nic Barbier
8
@Nic Du musst verwenden select:focus. Hatte das gleiche Problem auch.
DGibbs
141
Ich verstehe nicht, wie ist das eine Lösung? Was ist, wenn ich eine kleinere / größere Schriftgröße möchte?
Bryan
47
Der richtige Weg ist, das Meta-Tag zu ändern in: <meta name = "viewport" content = "width = Gerätebreite, Anfangsskala = 1, Maximalskala = 1, Benutzerskalierbarkeit = 0" />
Milos Matic
37
@MilosMatic In den meisten Fällen wahrscheinlich keine gute Lösung, da dies den Benutzer vollständig daran hindert, die Seite zu skalieren. Möglicherweise noch ärgerlicher für Ihre Besucher.
BadHorsie
361

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

Daxmacrog
quelle
65
Dies ist die Lösung für 2018+. Stimmen Sie dies zu, als ob Ihr Leben davon abhängt.
Henrik Petterson
17
Dies wird Android-Geräte Zoom-Fähigkeit brechen
fen1ksss
4
@daxmacrog, Sie haben Recht, aber das OP hat nicht erwähnt, ob er Androiden brechen will, indem er das erforderliche Verhalten zulässt. Hier habe ich persönlich eine falsche Option gewählt. Natürlich ist es besser zu spezifizieren.
Fen1ksss
13
@HenrikPetterson Dies ist mehr als nur das Deaktivieren des von OP festgelegten automatischen Zooms, sondern auch das Deaktivieren des Pinch-Zooms. Ich denke also nicht, dass es die Lösung für 2018+ ist.
André Werlang
4
@ AndréWerlang Das stimmt nicht. Wie in der Antwort klar angegeben, deaktiviert diese Lösung den Pinch-Zoom in Safari (oder Firefox) nicht, worum das OP gebeten hat. Wie bereits in früheren Kommentaren erwähnt, wird der Benutzerzoom auf Android-Geräten und in Chrome unter iOS deaktiviert.
Daxmacrog
223
@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.

Christina
quelle
9
Dies funktioniert nicht nur für Safari unter iOS (iPhone / iPad / iPod), sondern auch für Safari / OSX und Chrome (Windows und Mac). Wenn Sie also versuchen, das iPhone gezielt anzusprechen, funktioniert dies nicht.
Redtopia
31
Warum sagen alle 16px, aber niemand möchte erwähnen, warum genau es 16px ist? Warum so eine beliebige Zahl? Warum müssen wir die Textgröße unseres Formularfelds auf 16px einstellen und nicht .. sagen wir 1.8rem oder 2.5em oder so? Ist das nur ein dummer Fehler von einem proprietären Betriebssystem?
Beebee
14
@Beebee 100% Schriftgröße ist 16px, das ist die Standardeinstellung für die meisten, wenn nicht alle Browser (auch Desktop). IOS verwendet dies als Standard, wahrscheinlich weil es eine komfortable Größe zum Lesen hat. Warum es so eingestellt ist, habe ich mir nicht die Mühe gemacht, nachzuschauen, ist mir egal.
Christina
5
Verwenden Sie @media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px)diese Option , um den Effekt auf das iPhone zu beschränken. Ändern Sie Websites jedoch nicht, wenn Sie sie in Chrome anzeigen.
BurninLeo
9
Anstatt eine Medienabfrage zu verwenden, sollten Sie verwenden @supports (-webkit-overflow-scrolling: touch) , da diese CSS-Funktion nur unter iOS vorhanden ist
James Moran
189

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.

Marcellino Bommezijn
quelle
123
Technisch korrekt, aber ich bin mit der Begründung nicht einverstanden. Das Deaktivieren von Benutzer-Zooms auf einer ordnungsgemäß gestalteten Site ist im Allgemeinen immer noch eine schlechte Idee.
Fer
20
"Richtig gestaltet" ist sehr subjektiv. Stellen Sie sich einen festen 50-Pixel-Header oben auf einer Site vor, der vollständig reagiert und in allen Browsern funktionieren sollte. Durch das Zoomen in iOS Safari wird die Position des Headers und die gesamte Site zerstört.
Redtopia
62
Das Deaktivieren der Benutzerzoomfunktion ist aus UX-Sicht eine schreckliche Praxis und sollte unbedingt vermieden werden. Das freie Vergrößern ist eine grundlegende Eingabehilfenfunktion und ein Steuerelement, das Sie dem Benutzer niemals entziehen sollten.
Gabriel Luethje
72
In nativen mobilen Apps haben Sie nie die Möglichkeit zu zoomen und sie funktionieren einwandfrei. Warum sollte eine Webanwendung anders sein? Wenn Sie die entsprechende Schriftgröße und Zeilenhöhe mit deutlichen Kontrasten einstellen, sollten Sie in Ordnung sein.
Jotav
39
Diejenigen, die das Argument "In nativen Apps ist es in Ordnung" verwenden, übersehen die Tatsache, dass gut gemachte native Apps den Einstellungen für die Barrierefreiheit auf Betriebssystemebene wie der Textgröße entsprechen. Ältere und sehbehinderte Benutzer können und müssen extrem große betriebsweite Schriftgrößen verwenden, da dies erforderlich ist . Web-Apps halten sich häufig nicht an diese Einstellung oder können sie daher nicht einhalten. Daher ist es wichtig, die integrierten Eingabehilfen des Webbrowsers wie das Zoomen zuzulassen. Was auch immer Sie für perfekt lesbar halten, glauben Sie mir, es gibt Leute, die es nicht klar genug finden. Nehmen Sie diese Option Benutzern nicht weg, wenn Sie Wert auf Benutzerfreundlichkeit legen.
Ryan Williams
72

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

Nik
quelle
Ja, dies ist definitiv die beste Vorgehensweise , um das Zoomen auf Mobilgeräten zu vermeiden. Keine Js, keine Hacks, überhaupt keine Problemumgehungen. Aber selbst mit 16px bemerkte ich einen sehr kleinen Zoom in meinen Seiten, also versuchte ich 17px, 18px ... um zu sehen, was passiert.
ed1nh0
8
Es wird empfohlen, 100% für Körper, Schaltfläche, Eingabe, Textbereich und ausgewählte Elemente zu deklarieren. Auf diese Weise kann der Benutzer einen Standard festlegen, der nicht der mit Browsern gelieferte 16px ist. Jemand, der Probleme beim Lesen auf dem Bildschirm hat, setzt möglicherweise seine Standardeinstellung auf 18px oder 20px. Sie möchten ihre Auswahl nicht überschreiben, indem Sie ihnen 16px aufzwingen. Wenn es um iOS geht, haben sie sich entschieden, jeden Wert zu erhöhen, der laut HIG zu klein ist. Leider sieht es so aus, als würde der 100% -Wert nicht interpretiert, so dass wir nicht mehr in der Standardeinstellung hinzufügen können, um ihn zu beschwichtigen.
J. Hogue
RE iOS Safari, ab diesem Kommentar scheint es, dass Safari den font-size: 100%Wert korrekt interpretiert und die erforderlichen 16px erfasst.
Nathan Lafferty
36
input[type='text'],textarea {font-size:1em;}
Stormsweeper
quelle
3
Beachten Sie, dass die Einstellung "Benutzer skalierbar" auf "Nein" das Zoomen deaktiviert, was wahrscheinlich eine schlechte Idee ist.
Stormsweeper
18
Dies funktioniert nur, wenn die Standardschriftgröße Ihres Körpers die Standardeinstellung ist (nicht angegeben oder 1emoder 100%). Wenn Sie eine benutzerdefinierte Schriftgröße festlegen, können Sie diese font-sizein Ihrem Snippet festlegen 16px, um ein automatisches Zoomen zu vermeiden.
Alan H.
Ich weiß, dass diese Frage an das iPhone gerichtet war, aber dies ist plattformübergreifend kompatibler. In der Zukunft von mehr Plattformen / Geräten habe ich den 16px-Ansatz ausprobiert, aber auf einem Android-Tablet nur den automatischen Zoomeffekt reduziert. Die Einstellung auf '1em', wie im Beitrag angegeben, hat das Problem behoben.
toddles_fp
3
Weder 1emnoch 1remist eine richtige Lösung, da beide kleiner sein können 16pxund Safari zumindest erfordert 16px, nicht zu zoomen.
Finesse
2
Ich habe die Viewport-Lösung verwendet, aber sie hat nicht funktioniert. Die 16px-Lösung funktioniert einwandfrei, aber 16px ist zu groß für die Eingabebox meiner Website. Gibt es eine dritte Lösung
Suneth Kalhara? 2.
21

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

Milos Matic
quelle
32
Dies ist nicht unbedingt der "richtige" Weg, um dieses Verhalten zu verhindern. Mobile Safari zoomt heran, wenn der Text zum Lesen zu klein ist. Das Deaktivieren des Zooms ist schwierig und verhindert, dass Benutzer auf eine von Ihnen erwartete Weise mit Ihrer Seite interagieren können.
AlecRust
3
Anscheinend hat Apple in iOS10 die Eigenschaft für die maximale Skalierung so geändert, dass sie nicht mehr berücksichtigt wird, sodass alle Websites unabhängig von ihrer Einstellung vergrößern können.
Wolfr
3
Dies funktioniert für iOS10 20 / September / 2016 Version ... funktioniert zumindest auf meiner App ... Danke !!! Bevor ich <meta name = "viewport" verwendet habe content = "width = Gerätebreite, Anfangsskala = 1, Minimalskala = 1 , Maximalskala = 1" verwendet habe, habe ich es auf die Zeile in der Antwort und umgeschaltet es hat funktioniert ...
eljamz
1
"Stellen Sie sicher, dass der Browser-Pinch-Zoom nicht durch das Ansichtsfenster-Metaelement der Seite blockiert wird, damit die Seite auf 200% gezoomt werden kann. Restriktive Werte für benutzerskalierbare und maximal skalierbare Attribute dieses Metaelements sollten vermieden werden." w3.org/TR/mobile-accessibility-mapping/#zoom-magnification
danielnixon
Ich habe Kommentare gesehen, wie einige dieser Meta-Tags unter iOS 10 nicht funktionieren, und ich weiß, dass die oben genannten Funktionen zumindest unter Chrome für iOS funktionieren. :) Vielen Dank!
cbloss793
16

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.

dlo
quelle
5
Ich bin mir nicht sicher, wann sich das Safari-Verhalten möglicherweise geändert hat, aber jetzt (iOS6.0.1) wird die Maus vor dem automatischen Zoomen heruntergefahren. In meiner vorherigen Lösung wird das Zoomen daher zu früh wieder aktiviert. Ich habe keine angemessene Lösung gefunden, da alle Ereignisse, die ich jetzt ausprobiert habe, vor dem Zoomen auftreten. Sie können das Zoomen bei einem Tastendruck oder einer Unschärfe wieder aktivieren. Es gibt jedoch einige Szenarien, die möglicherweise übersehen werden (z. B. wenn der Benutzer manuell zoomen möchte, bevor er etwas eingibt).
dlo
15

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

Tuyen Cao
quelle
11
"Stellen Sie sicher, dass der Browser-Pinch-Zoom nicht durch das Ansichtsfenster-Metaelement der Seite blockiert wird, damit die Seite auf 200% gezoomt werden kann. Restriktive Werte für benutzerskalierbare und maximal skalierbare Attribute dieses Metaelements sollten vermieden werden." w3.org/TR/mobile-accessibility-mapping/#zoom-magnification
danielnixon
9
Dies verstößt gegen die von W3 definierten Barrierefreiheitsregeln.
Joshua Russell
hat für mich funktioniert, auch dies ist die beste Lösung für mich, da ich die Freiheit haben möchte, Eingabeschriftgrößen unter 16px zu ändern und keinen JS-Hack will
Blue Bot
14

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;
}
piouPiouM
quelle
Zu Ihrer Information, dies funktionierte gut auf meinem iPhone 5 mit iOS 6, aber auf einem iPhone 4 mit iOS 5 im Hochformat wurde das Fokus-Styling angewendet, nachdem der Zoom aufgetreten war. Vielleicht ist etwas Feines los, ich habe es nicht weiter untersucht.
Vish
Ich möchte nur sagen, dass ich viele verschiedene Abfragen mit Zoom habe, um die Entwicklung zu beschleunigen. Je nachdem, wie viel Sie zoomen, wird bestimmt, wie viel Schriftgröße Sie benötigen, glaube ich
Mike
: focus hat bei mir nicht funktioniert iOS 10.2 iPhone 6, aber Eingabe [type = "text"]: hover hat gut funktioniert.
Amirhossein Rzd
13

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();
}
Oliver Joseph Ash
quelle
Warum erstellen Sie eine Kopie von addMaximumScaleToMetaViewport? Ist es nur aus semantischen Gründen?
Pherrymason
Ja, nur die Funktion einem anderen Namen zuordnen, damit klar ist, wie sie verwendet wird.
Oliver Joseph Ash
8

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" />');
} 
Ilkka R.
quelle
Das hat bei mir am besten funktioniert. Ich habe jedoch die Touchstart- / Touchend-Ereignisse mit zoomDisable und zoomEnable in ein 'Fokus'-Ereignis geändert.
Justin Cloud
Das Hinzufügen der Verzögerung scheint auf neueren Versionen von iOS ziemlich gut zu funktionieren, aber es ist interessant, dass es nicht sehr gut funktioniert, wenn es auf 250 ms eingestellt ist. Das deutet darauf hin, dass unter bestimmten Umständen 500 ms möglicherweise auch nicht funktionieren, aber wenn es die meiste Zeit funktioniert, ist es wahrscheinlich besser, als überhaupt nicht zu funktionieren. Gute Idee.
dlo
7

Das hat bei mir funktioniert:

input, textarea {
    font-size: initial;
}

quelle
Schön einfach, aber gibt es eine Möglichkeit zu kontrollieren, wie groß diese "anfängliche" Größe ist?
2540625
Ich habe es nicht getestet, aber dies sollte eine Möglichkeit sein, die Schriftgröße zu steuern. (Bitte lassen Sie mich wissen, ob dies funktioniert und ich werde meine Antwort aktualisieren.) body {Schriftgröße: 20px; } input {Schriftgröße: erben; }
7

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.

Tanny O'Haley
quelle
6

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.

Nicolas Hoizey
quelle
4
Das ist edel. Das ist stylin '. Ich habe keine Wortspiele mehr. Cleverer Ansatz.
Crowjonah
@ Wolfr hast du ein aktuelles Gerät anprobiert?
Nicolas Hoizey
1
Dies funktionierte für uns unter iOS 12. Ich mag diesen Ansatz am besten, anstatt mit CSS-Transformationen und negativen Rändern herumzuspielen.
anonym-eins
6

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.

jirikuchta
quelle
Dieser funktioniert tatsächlich für mich, insbesondere da Sie in neueren iOS-Versionen das Ansichtsfenster-Meta-Tag nicht zum Deaktivieren des Zooms verwenden können.
Mparizeau
Bestätigte Arbeit unter iOS 12.1, danke
Ziki
6

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

l3bel
quelle
Vielen Dank für Ihr Feedback, @MikeBoutin. Können Sie bitte Ihre Umgebung (Geräte- / iOS-Version) teilen?
13.
6

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 .

Meligy
quelle
4

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

}
Scott Phillips
quelle
3

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

.form-control {
  font-size: 16px;
}
Bohdan Vorona
quelle
3

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).
Zauberer
quelle
3

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

Jeffery To
quelle
3

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.

JBlitzen
quelle
Dies ist eine großartige Erklärung dafür, was Safari macht. Vielen Dank!
Jeremy
2

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%;
}
Jack Ottermans
quelle
5
Dies funktioniert bei mir nicht, getestet mit dem neuesten iOS 6 und iOS 9.2.1. Hier ist eine minimal reproduzierbare Seite: pastebin.com/bh5Zhe9h Der Fokus wird immer noch vergrößert. Seltsam, dass dies im Jahr 2015 gepostet und upvoted wurde, aber nicht in iOS 6 funktioniert.
Alexandre Dieulot
2

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.

Sindiplom
quelle
1

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>
BurninLeo
quelle
1

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));
});
Stephen Walsh
quelle
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)
    });
felsig
quelle
Wenn der Benutzer vor dem Klicken auf das Eingabesteuerelement bereits ein wenig gezoomt hätte, würde diese Lösung dazu führen, dass das Ansichtsfenster plötzlich "dezoomt" wird?
Bruno Torquato
Ja, aber es sieht nicht störender aus als der vorherige "Zoom" -Effekt, der jedes Mal auftrat, wenn der Benutzer auf eine Eingabe klickte.
Pete
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.

Jon Tinsman
quelle
1

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.

magom001
quelle