Wie deaktiviere ich das Zoomen von Ansichtsfenstern in Mobile Safari?

Ich habe alle drei vergeblich ausprobiert:

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

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

Es handelt sich jeweils um unterschiedliche Werte, die von der Google-Suche oder der SO-Suche empfohlen wurden, aber keiner der Werte für " Benutzerskalierbar = X " scheint zu funktionieren

Ich habe auch versucht, die Werte durch Kommas anstelle von Semikolon zu begrenzen, kein Glück. Dann habe ich NUR versucht, den user-scalableWert vorhanden zu haben, immer noch kein Glück.

AKTUALISIEREN

Ich habe dies von Apples Website erhalten und es funktioniert:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Es stellt sich heraus, dass das Problem die nicht standardmäßigen Anführungszeichen waren, weil ich das Meta-Tag von einer Website kopiert hatte, die sie verwendete, whoops

In Ihrem Code werden doppelte Anführungszeichen als ausgefallene doppelte Anführungszeichen angezeigt. Wenn die ausgefallenen Anführungszeichen in Ihrem tatsächlichen Quellcode vorhanden sind, würde ich vermuten, dass dies das Problem ist.

Dies funktioniert für mich auf Mobile Safari in iOS 4.2.

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

Für Benutzer, die nach einer iOS 10-Lösung suchen, user-scaleable=noist Safari für iOS 10 deaktiviert. Der Grund dafür ist, dass Apple versucht, die Barrierefreiheit zu verbessern, indem Benutzer Webseiten vergrößern können.

Aus den Versionshinweisen :

Um die Zugänglichkeit von Websites in Safari zu verbessern, können Benutzer jetzt auch dann zoomen, wenn eine Website im Ansichtsfenster benutzerskalierbar = Nein festlegt.

Soweit ich weiß, haben wir Pech.

@mattis ist richtig, dass iOS 10 Safari es Ihnen nicht erlaubt, Pinch zu deaktivieren, um mit dem vom Benutzer skalierbaren Attribut zu zoomen. Ich habe es jedoch dazu gebracht, PreventDefault für das Ereignis 'gesturestart' zu deaktivieren. Ich habe dies nur auf Safari in iOS 10.0.2 überprüft.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

Für iPhones Safari bis iOS 10 ist "Ansichtsfenster" keine Lösung, ich mag diesen Weg nicht, aber ich habe diesen Javascript-Code verwendet und er hat mir geholfen

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

user-scalable=0

Dies funktioniert unter iOS 10 nicht mehr. Apple hat die Funktion entfernt.

Es gibt keine Möglichkeit, die Zoom-Website unter iOS zu deaktivieren, es sei denn, Sie erstellen eine Brutto-Plattform-App.

Versuchen Sie, Ihrem Head-Tag Folgendes hinzuzufügen:

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

zusätzlich

<meta name="HandheldFriendly" content="true">

Fügen Sie abschließend entweder als Stilattribut oder in Ihrer CSS-Datei den folgenden Text für Webkit-basierte Browser hinzu:

html {
    -webkit-text-size-adjust: none
}

Ich habe es in iOS 12 mit dem folgenden Code zum Laufen gebracht:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

Mit der ersten if-Anweisung stelle ich sicher, dass sie nur in iOS-Umgebungen ausgeführt wird (wenn sie in Android ausgeführt wird, wird das Scroll-Verhalten unterbrochen). Beachten Sie auch die passiveOption auf false.

Dies funktioniert gut in IOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

danke @arthur und @aleclarson

Ich habe es geschafft, dieses Verhalten zu stoppen, indem ich dem HTML-Header Folgendes hinzugefügt habe. Dies funktioniert auf Mobilgeräten, da Desktop-Browser das Zoomen mit dem Mausrad unterstützen. Bei Desktop-Browsern ist das keine große Sache, aber es ist wichtig, dies zu berücksichtigen.

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

und die folgende Regel zum CSS-Stylesheet

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

Manchmal können diese anderen Anweisungen im contentTag Apples beste Vermutung / Heuristik beim Layout Ihrer Seite durcheinander bringen. Alles, was Sie zum Deaktivieren des Pinch-Zooms benötigen, ist.

<meta name="viewport" content="user-scalable=no" />

In Safari 9.0 und höher können Sie das unten gezeigte Meta-Tag für das Ansichtsfenster verkleinern, wie unten gezeigt

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Ich hatte dummerweise ein Wrapper-Div, dessen Breite in Pixel gemessen wurde. Die anderen Browser schienen intelligent genug zu sein, um damit umzugehen. Nachdem ich die Breite in einen Prozentwert konvertiert hatte, funktionierte dies auch auf Safari Mobile. Sehr nervig.

.page{width: 960px;}

zu

.page{width:93.75%}

<div id="divPage" class="page">
</div>

Verwenden des CSS touch-action Eigenschaft ist die eleganteste Lösung. Getestet unter iOS 13.5.

So deaktivieren Sie Pinch-Zoom-Gesten und tippen zweimal auf, um zu zoomen:

body {
  touch-action: pan-x pan-y;
}

Wenn Ihre App auch kein Schwenken , dh Scrollen, benötigt, verwenden Sie Folgendes:

body {
  touch-action: none;
}

Um die Barrierefreiheitsanforderungen von WAI WCAG 2.0 AA zu erfüllen, dürfen Sie den Quetschzoom niemals deaktivieren . (WCAG 2.0: SC 1.4.4 Ändern der Größe von Textebene AA). Weitere Informationen hierzu finden Sie hier: Mobiler Zugriff: Anwendung von WCAG 2.0 und anderen W3C / WAI-Richtlinien auf Mobilgeräte, 2.2 Zoom / Vergrößerung

Dieser sollte auf dem iPhone usw. arbeiten.

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