it-swarm.com.de

Deaktivieren Sie den automatischen Zoom in der Eingabe "Text" - Safari auf dem iPhone

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

409

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

Zusätzlich muss das Element select mit der Pseudoklasse focus verbunden 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 genannten Elemente zu verwenden. Sie können einfach die gewünschten Elemente gestalten, z. B. text, number und 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;
}
395
srikanth
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

Neu: IOS zoomt weiter, es sei denn, Sie verwenden 16px für die Eingabe 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 beim Auswählen keinen Hintergrund hinzufügt.

206
Christina

Wenn Ihre Website ordnungsgemäß für ein mobiles Gerät entwickelt wurde, können Sie entscheiden, keine Skalierung 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 "herumflattern" wird.

163

Sie können verhindern, dass Safari Textfelder während der Benutzereingabe automatisch vergrößert , ohne die Möglichkeit des Benutzers, den Zoom zu fixieren, zu deaktivieren. Fügen Sie einfach maximum-scale=1 hinzu, lassen Sie jedoch das in den anderen Antworten vorgeschlagene Attribut für die Benutzer-Skala aus.

Es ist eine lohnende Option, wenn Sie ein Formular in einer Ebene haben, das beim Zoomen umherfließt, was dazu führen kann, dass wichtige Elemente der Benutzeroberfläche den Bildschirm verlassen.

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

114
daxmacrog

Zusammenfassend lautet die Antwort: Legen Sie die Schriftgröße der Formularelemente auf mindestens 16px fest

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

Um dieses Problem zu beheben, können Sie das Meta-Ansichtsfenster folgendermaßen ändern:

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

21
Milos Matic

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 stattfindet, das Zoomen jedoch vor Mousedown- oder Fokusereignissen.

2) Sie können den META-Viewport-Tag mithilfe von Javascript dynamisch ändern (siehe Zoom auf iPhone-Safari mit Javascript aktivieren/deaktivieren? )

Versuchen Sie also Folgendes (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 fängt, aber es hat in meinen Tests gut funktioniert und ist ein guter Anfang.

14
dlo

Ich musste vor kurzem (heute: D) dieses Verhalten integrieren. Um die ursprünglichen Entwurfsfelder, einschließlich der Kombination, nicht zu beeinträchtigen, habe ich mich dafür entschieden, die Transformation im Fokus des Feldes anzuwenden:

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

Fügen Sie user-scalable = 0 hinzu, um das Viewport-Meta wie folgt zu verwenden

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

Arbeitete für mich :)

13
Tuyen Cao

Javascript-Hack, der unter iOS 7 funktioniert. Dies basiert auf der Antwort von @dlo, jedoch werden Mouseover- und Mouseout-Ereignisse durch Touchstart- und Touchend-Ereignisse ersetzt. Grundsätzlich fügt dieses Skript eine halbe Sekunde Zeit 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" />');
} 
8
Ilkka R.

Ich habe oben Christinas Lösung verwendet, aber mit einer kleinen Modifikation für Bootstrap und einer weiteren Regel für Desktop-Computer. Die Standardschriftgröße von Bootstrap ist 14px, was den Zoom bewirkt. Im Folgenden wird es für "Formularsteuerelemente" in Bootstrap in 16px geändert, um das Zoomen zu verhindern.

@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 es mit .form-control: focus versucht, wodurch es bei 14px blieb, außer bei Fokus, der es in 16px änderte und das Zoomproblem mit iOS8 nicht behoben wurde. Zumindest auf meinem iPhone mit iOS8 muss die Schriftgröße vor dem Scharfstellen 16px betragen, damit das iPhone nicht zoomt.

7
Tanny O'Haley

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 einige andere Elemente in der Benutzeroberfläche angepasst werden, wenn diese 16px-Schriftgröße das Design beeinträchtigt.

6
Nicolas Hoizey

Das hat für mich funktioniert:

input, textarea {
    font-size: initial;
}
6
user1000952

Nach einiger Zeit versuchte ich 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 "Mausedown" wird die Schriftgröße der Eingabe auf 16px festgelegt. Dadurch wird das Zoomen verhindert. Bei einem Fokusereignis wird die Schriftgröße wieder auf den ursprünglichen Wert zurückgesetzt. 

Im Gegensatz zu zuvor veröffentlichten Lösungen können Sie die Schriftgröße der Eingabe nach Ihren Wünschen einstellen.

4
jirikuchta

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

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

Nachdem ich hier fast jede einzelne Zeile gelesen und die verschiedenen Lösungen getestet hatte, ist dies, dank allen, die ihre Lösungen geteilt haben, das, was ich für mich auf iPhone 7 iOS 10.x gefunden, getestet und gearbeitet habe:

@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 gibt jedoch einige Nachteile, die spürbar einen "Sprung" bewirken, da sich die Schriftgröße schnell zwischen den Zuständen "hover" ed und "focus" ändert - und die Auswirkungen auf die Leistung durch das Neuzeichnen beeinflusst werden

3
l3bel

Wenn Sie eine Schriftgröße (für Eingabefelder) festlegen, die der Schriftgröße des Hauptteils entspricht, scheint der Browser das Heraus- oder Verkleinern des Browsers zu behindern. font-size: 1rem ist eine elegantere Lösung.

2
sindiploma

Pseudoelemente wie :focus funktionieren nicht mehr so ​​wie früher. Ab iOS 11 kann eine einfache Reset-Deklaration vor Ihren Hauptstilen 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 entspricht die Klasse: f5 der Klasse: fontSize: 1rem. Dies ist in Ordnung, wenn Sie die Standardskala für die Textschrift beibehalten haben.

Allerdings: Wenn Sie die Schriftgrößenklasse wählen: f6, entspricht dies fontSize: .875rem auf einem kleinen Bildschirm nach oben. In diesem Fall müssen Sie Ihre Reset-Deklarationen präzisieren:


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

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

/* not small */

}

2
urbanaut

Ich sehe, dass die Leute hier etwas seltsames mit JavaScript oder der Viewport-Funktion tun und das manuelle Zoomen auf Geräten ausschalten. Durch das Hinzufügen dieses CSS-Snippets wird der Auto-Zoom in iOS deaktiviert, ohne dass die Schriftgröße in eine feste Zahl wie 16px geändert wird.

Standardmäßig verwende ich in den Eingabefeldern eine Schriftgröße von 93,8% (15px). Durch das Hinzufügen meines CSS-Ausschnitts bleibt dieser bei 93,8%. Sie müssen nicht auf 16px umstellen oder eine feste Nummer angeben.

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

Da das automatische Zoom-In (ohne Zoom-Out) auf dem iPhone immer noch anstößig ist, folgt hier ein JavaScript, das auf dem Vorschlag von dlo basiert und mit Fokus/Unschärfe arbeitet.

Das Zoomen ist deaktiviert, sobald eine Texteingabe wieder hergestellt wird, wenn die Eingabe verlassen wird.

Hinweis: Einige Benutzer können das Bearbeiten von Texten in einer kleinen Texteingabe nicht verwenden! Ich persönlich bevorzuge es, 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 in 16 Pixel (berechnet 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 der Anzeige des iPhones mit 320 Pixel berechnet. Dies ist nur für das iPhone im Hochformatmodus gültig.

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

Anstatt die Schriftgröße einfach 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 16px gesetzt werden kann.
  2. Verwenden Sie die scale() CSS-Transformation und negative Ränder, um das Eingabefeld auf die richtige Größe zu verkleinern.

Angenommen, Ihr Eingabefeld wurde ursprünglich mit folgendem Stil versehen:

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, dann mit scale() um 12/16 = 75% reduzieren, hat das Eingabefeld die richtige visuelle Größe (und Schriftgröße) und es wird kein Zoom angezeigt im Fokus.

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

Mit dieser 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 Pixeln, während es scheint, als hätten 12 Pixeln Text.

Ich habe einen Blog-Post, in dem ich ein wenig ausführlicher darstelle, und dieses Beispiel als sichtbares HTML:
Kein Eingangszoom in Safari auf dem iPhone, der perfekte Weg zum Pixel

1
Jeffery To

In einem Kommentar für die erste Antwort zum Einstellen der Schriftgröße auf 16px wurde die Frage gestellt, wie das eine Lösung ist. Was ist, wenn Sie eine größere/kleinere Schrift wünschen?.

Ich weiß nicht, wie es Ihnen geht, aber die Verwendung von px für Schriftgrößen ist nicht der beste Weg. Sie sollten em verwenden.

Ich habe dieses Problem auf meiner responsive Site entdeckt, wo 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 abhängig vom Viewport. Da das Standard-HTML-Format 10 ist, werden für mein Eingabefeld auf dem Desktop 28px berechnet

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

Sie müssen den Sweetspot in Schriftgröße finden und ihn dann in Ihre rem/em-Größen rückwärts konvertieren.

1
Jon Tinsman

Hier ist ein Hack, den ich bei einem meiner Projekte verwendet habe:

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

Am Ende hatte ich die ursprünglichen Stile und Skalierungen, die ich wollte, aber keinen Fokus auf den Fokus. 

1
magom001

Basierend auf der Antwort von Stephen Walsh ... Dieser Code funktioniert, ohne die Schriftgröße der Eingaben zu ändern (was lahm aussieht), und er funktioniert weiterhin mit FastClick Hilfe bringen die "bissig". Passen Sie die Breite des "Ansichtsfensters" 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)
    });
1
rocky

Ich musste das Problem mit dem automatischen Zoom in Formularsteuerelemente für eine Website der Niederländischen Universität (die 15px in Formularsteuerelementen verwendete) "beheben". Ich habe folgende Anforderungen gestellt:

  • benutzer muss noch zoomen können
  • schriftgröße muss gleich bleiben
  • keine blitze des vorübergehenden unterschiedlichen stils
  • keine jQuery-Anforderung
  • muss auf neuestem iOS funktionieren und keine andere Kombination von Betriebssystem und Gerät behindern
  • wenn möglich keine magischen Zeitüberschreitungen und wenn nötig, richtig Timer löschen

Dies ist, was ich bis jetzt aufkam:

/*
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 in Kürze auf einigen anderen Versionen testen wird
  • Die Verwendung von focusIn-Ereignissen bedeutet, dass mindestens iOS 5.1 erforderlich ist. Ich sehe jedoch, dass von uns erstellte Websites in iOS-Versionen, die älter als 9 sind, sowieso ein cooler Bonus sind.
  • Verwenden der Ereignisdelegierung, da auf vielen Websites, an denen ich arbeite, Seiten vorhanden sind, die Formularsteuerelemente dynamisch erstellen können
  • Festlegen der eventListeners auf das html-Element (documentElement), um nicht darauf zu warten, dass body verfügbar wird.
1
Mark de Jong

Es hat eine Weile gedauert, bis ich es gefunden habe, 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));
});
1
Stephen Walsh

Wie bereits in vielen anderen Antworten erwähnt, kann dies durch Hinzufügen von maximum-scale zum Meta viewport -Tag erreicht werden. Allerdings dies hat die negative Konsequenz, dass der Benutzerzoom für Android Geräte deaktiviert wird . ( Der Benutzerzoom wird auf iOS-Geräten seit Version 10 nicht deaktiviert .)

Wir können JavaScript verwenden, um maximum-scale dynamisch zum Meta viewport hinzuzufügen, wenn das Gerät iOS ist. Dadurch wird das Beste aus beiden Welten erreicht: Der Benutzer kann 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) {
    const content = el.getAttribute('content');

    const newContent = [content, 'maximum-scale=1.0'].join(', ');

    el.setAttribute('content', newContent);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}
1

In Angular können Sie Anweisungen verwenden, um das Zoomen des Fokus auf IOS Geräten zu verhindern. Kein Meta-Tag, um die Zugänglichkeit zu gewährleisten.

import { Directive, ElementRef, HostListener } from '@angular/core';

const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;

@Directive({ selector: '[noZoomiOS]' })

export class NoZoomiOSDirective {
  constructor(private el: ElementRef) {}

@HostListener('focus')
  onFocus() {
    this.setFontSize('');
  }

@HostListener('mousedown')
  onMouseDown() {
    this.setFontSize(`${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px`);
  }

private setFontSize(size: string) {
  const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);

  if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
      return;
   }

  const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  iOS 
     && (this.el.nativeElement.style.fontSize = size);
 }
}

Sie können es wie folgt verwenden: <input noZoomiOS >, nachdem Sie es in Ihrem *.module.ts deklariert haben.

0

Ich möchte meine $ .02 einwerfen, weil ich trotz dieser Antworten drei Tage gebraucht habe, um herauszufinden, dass wtf im Gange ist und ich die Lösung möglicherweise in Zukunft wieder brauchen werde.

Meine Situation war etwas anders als die beschriebene.

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

Dadurch konnte ich die Textfarben unsichtbar ändern, basierend auf Benutzerinteraktionen mit Farbunterschieden an anderer Stelle auf der Seite, während die Auswahl normalerweise ausgeblendet blieb, damit sie die Farben im richtigen Kontext sehen konnten.

Nun, auf dem iPad Safari führte das Klicken auf das Farbdisplay dazu, dass die Bildschirmtastatur angezeigt wurde, und nichts, was ich getan hätte, konnte dies verhindern.

Endlich habe ich herausgefunden, wie das iPad das macht.

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

Wenn diese Kombination auftritt, wird die Bildschirmtastatur angezeigt.

Die Lösung, die ich benutzte, bestand darin, sowohl Touchstart als auch Touchend auf diesen 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 dasselbe 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 Reihenfolge aufgrund der Abschnitte ist einfach die Textauswahl. Alles andere wird abgefangen, bevor Safari es verarbeiten und seine Tastaturfunktionen ausführen kann. Die Intercepts touchstart und touchend verhindern, dass auch die Mausereignisse ausgelöst werden, und im Kontext ist dies völlig in Ordnung.

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

Ich bin mir 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 in die Luft sprudeln, und überlegen Sie, nach einer kurzen Zeitspanne eine Auswahl vorzunehmen, um sicherzustellen, dass Safari die Sequenz nicht als Tastaturauslöser erkennt.

0
JBlitzen

Bitte benutzen Sie kein Javascript oder Hacks, damit es funktioniert. Dies beeinflusst Ihre Projektbewertung im Web.

Dies wird den Trick tun:

input, input:active, input:focus, input:focus-within, input:hover, input:visited {
    font-size: 16px!important;
}
0
Chocoprins18