Wie deaktiviere ich das Zoomen von Ansichtsfenstern in Mobile Safari?

393

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

MetaGuru
quelle
6
Wenn Sie ein Spiel erstellen, ist möglicherweise die Steuerung des Zooms gültig. In fast allen anderen Fällen sollte jedoch dringend davon abgeraten werden. Leider ist es für viele mobile Entwickler zur Standardpraxis geworden. Wenn ein Benutzer zoomen möchte, um Text leichter lesen zu können usw., ist es nicht sehr schön, ihn daran zu hindern.
user2268788
72
Wir deaktivieren den Zoom für eine mobile webbasierte Anwendung. Sie können native iOS-Apps nicht vergrößern und dies ist in unserer Webanwendung nicht erforderlich. Wenn Ihre Website oder App für Mobilgeräte optimiert ist, müssen Ihre Benutzer nicht zoomen. Es gibt immer Anwendungsfälle zum Deaktivieren des Zooms. Es muss nicht immer so oder so sein.
Bradley Flood
10
Ja, ich folge nicht der Logik, dass das Deaktivieren des Zooms auf einer für Mobilgeräte optimierten Site eine schlechte Sache ist . Was weitaus schlimmer ist, ist das versehentliche Schwenken des Ansichtsfensters, da der Bildschirm versehentliche Schwenk- und Zoomeingaben auf einer Site aufnimmt, für die Sie ohnehin nicht zoomen müssen. Wenn Ihre Benutzer Inhalte auf Ihrer für Mobilgeräte optimierten Website vergrößern müssen, liegt das Problem realistisch im Design und nicht im fehlenden Zoom.
Nathan Hornby
3
@ NathanHornby: Das Problem beim Deaktivieren des Zooms ist die mangelnde Berücksichtigung der Benutzereinstellungen. Unterschiedliche Benutzer bevorzugen unterschiedliche Textgrößen. Jüngere Zielgruppen mit gutem Sehvermögen bevorzugen möglicherweise mehr Inhalte, während Benutzer mit schlechtem Sehvermögen nichts verwenden können, das keinen riesigen Text enthält. Andere Menschen haben Parkinson, haben aber immer noch ein gutes Sehvermögen. Sie bevorzugen daher besonders große Schaltflächen, profitieren jedoch im Allgemeinen nicht von großem Text.
Lie Ryan
4
@ NathanHornby Das bedeutet nicht, dass der Designer unbedingt etwas falsch gemacht hat. Dies bedeutet einfach, dass der Benutzer aus irgendeinem Grund die Ansicht vergrößern möchte. Pinch-Zoom ist eine Standardfunktion aller Touchscreen-Telefone. Jeder Benutzer, der ein solches Telefon besitzt, weiß, wie man es benutzt. Ich weiß, dass es eine alte Frage ist, aber ich bin immer noch frustriert von allwissenden Entwicklern, die darauf bestehen, die Funktionalität meines Telefons zu beeinträchtigen, weil sie der Meinung sind, dass dadurch ihre Designs besser aussehen.
user1751825

Antworten:

718

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" />
BoltClock
quelle
12
Es waren die ausgefallenen Zitate, ich hatte das Tag von einer Website kopiert, ohne es zu merken, danke, dass Sie darauf hingewiesen haben!
MetaGuru
5
Vielleicht ist dies hier der lange Schwanz, aber es könnte erwähnenswert sein, dass dies auf der Seite "oberste Ebene" angewendet werden muss. Wenn Sie dieses Meta-Tag auf einen Iframe angewendet haben, funktioniert es nur, wenn das Meta-Tag auch auf die oberste Seite angewendet wird.
Founddrama
2
Warum irgendjemand jemals eine Software erstellen würde, die ausgefallene Zitate erstellt, ist mir ein Rätsel.
Traubenfuchs
3
@Traubenfuchs: Typografie.
BoltClock
3
Dies ist eine ziemlich alte Antwort, und als ich zu dem Problem kam, das ich gelesen hatte, würde dies Zugänglichkeitsprobleme verursachen, wenn Sie die Benutzerskalierbarkeit auf Nein setzen. Ab iOS 10 funktioniert es einwandfrei, sodass der Benutzer zoomen kann, wenn er möchte, das Eingabefeld jedoch nicht anders zoomen kann. Sie müssen auch keine großen Schriftgrößen festlegen.
David
161

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
quelle
6
Was für eine schreckliche Entscheidung von Apple. Wenn Sie einen Drehknopf mit den Tasten "-" und "+" verwenden, um eine Zahl zu verringern / zu erhöhen, wird die Seite in iOS Safari jetzt wiederholt vergrößert und verkleinert. Die Druckmaschinen werden als doppeltes Tippen zum Zoomen interpretiert, ohne dass dies deaktiviert werden kann. iOS Chrome funktioniert einwandfrei. Frustrierend.
Paul
5
Ich bin zwar von dieser Entscheidung verarscht, aber ich freue mich sehr über Apple als Benutzer, da ich diese Funktion auf vielen Websites erzwingen wollte, auf denen kleine Elemente verwendet wurden.
Bishoy Hanna
10
Die Welt wird zur Hölle
kleiner kleiner Mann
2
Oh je, wer hätte das gedacht? Eine weitere lächerliche Entscheidung von Apple
Emil Pedersen
3
Überlassen Sie es Apple, allen eine Barrierefreiheitsfunktion
aufzuzwingen,
98

@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();
});
Jeremypresse
quelle
8
Unter iOS 10 stellte ich fest, dass dies funktioniert. Wenn Sie jedoch durch die Seite scrollen und dann beim Scrollen mit der Prise zoomen, wird das Zoomen ermöglicht. Dann stecken Sie in der neuen Zoomstufe fest, bis Sie erneut scrollen. Dies scheint also keine gute Lösung zu sein, es sei denn, Ihr Seitenkörper ist nicht scrollbar. :(
Rand Scullard
1
Eine Einschränkung: Der Benutzer kann immer noch zweimal auf den Bildschirm tippen, der zoomen wird / kann und davon nicht erfasst wird.
Stephen
1
Ermöglicht dennoch manchmal das Zoomen durch zweimaliges Tippen auf den Bildschirm. :(
Jarzka
4
Was entspricht dem "Doppelklopfen" gesturestart? dblclick ?
Lowtechsun
3
Ein weiterer Hinweis, wenn Sie den Doppelklick-Aspekt des Zooms deaktivieren möchten. Mobile Safari unterstützt auch "Touch-Action: Manipulation" (fällt unter "Basisunterstützung", wodurch Double-Tap-Ereignisse deaktiviert werden. Dokumentation hier: developer.mozilla.org/en-US/docs/Web/CSS/touch-action
jeremypress
15

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);
Arthur Tsidkilov
quelle
3
Es sollte seinevent.scale !== 1
Aleclarson
@aleclarson event.scale> 1 include Bedingung event.scale! == 1
Arthur Tsidkilov
@aleclarson für das Verhindern des Zooms auf Mobile Safari ist es genug, ich schrieb, dass ich diese Art nicht mag, normalerweise muss es Ansichtsfenster verwendet werden, aber auf iOS iPhone 6 und höher funktioniert es nicht (ich denke, Ihre event.scale ! == 1 sollte korrekter sein, aber das alles ist nicht korrekt, es ist eine Art Hacking)
Arthur Tsidkilov
@aleclarson Scheint mit! == den nativen Browser in Android 4.4 zu brechen; event.scale ist undefiniert.
James Pizzurro
3
@ JamesPizzurro Ja, Sie können verwendenevent.scale !== undefined && event.scale !== 1
Aleclarson
11
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.

wütende Kiwi
quelle
So ein Mist ... Irgendeine Idee, warum sie das entfernt haben?
Stephen Tetreault
3
@smt Sie möchten nicht, dass die Web-Erfahrung mit der App-Erfahrung im App Store konkurriert.
Marvin Danig
2
@marvindanig ja ... da sie 99 $ Gebühr für die Erstellung einer App benötigen, die sonst leicht zu einer zugänglicheren Webseitenanwendung für alle Plattformen gemacht werden könnte. Auch von Apple kann ein "Web-Erlebnis" nicht gefallen, wenn es bedeutet, dass Benutzer + Entwickler den ummauerten Garten meiden können. Es ist alles über Macht und Geld von Apple :(
humanityANDpeace
Es ist tatsächlich möglich, dies auf neueren iOS-Versionen zum Laufen zu bringen. Siehe meine Antwort: stackoverflow.com/a/62165035
Feross
7

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
}
Lorenz Lo Sauer
quelle
Funktioniert nicht mit neueren iOS-Versionen
Feross
7

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.

José Antonio Postigo
quelle
Funktioniert nicht auf meinem iOS 12.3.1, hier ist der Testlink: https://output.jsbin.com/liqiraj
Jess
4

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

Nikhil Gowda
quelle
iOS 13 ändern false in {passive: false}
Wayofthefuture
4

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

imelgrat
quelle
Funktioniert nicht mit neueren iOS-Versionen
Feross
3

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" />
Alex Borsody
quelle
Funktioniert nicht mit neueren iOS-Versionen
Feross
2

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">
ursuleacv
quelle
Funktioniert nicht mit neueren iOS-Versionen
Feross
0

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>
Welshboy
quelle
0

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;
}
Feross
quelle
-3

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

haltersweb
quelle
13
Dies ist keine Antwort .. und viele Kunden bitten noch darum, den Zoom zu blockieren .. daher kann ich dies nicht als allgemeine Regel
9
Der Zoom für Barrierefreiheit liegt nicht in der Verantwortung der Seite (und auch nicht einer App). Es liegt in der Verantwortung des Betriebssystems, ein zugängliches Zoomwerkzeug bereitzustellen. Heutzutage bietet jedes Betriebssystem eine solche Funktion, die als Bildschirmzoom gilt und das Zoomen der Seite selbst nicht beeinträchtigen sollte, da dies nicht für die Barrierefreiheit vorgesehen ist.
Bruno Finger
4
Es gibt immer gültige Anwendungsfälle für solche Dinge. Aus irgendeinem Grund scheint so ziemlich die gesamte Webliteratur davon auszugehen, dass das Web nur zum Erstellen von Blogs dient. So wie es gültige Anwendungsfälle für JavaScript gibt eval(), gibt es auch solche zum Deaktivieren des Zooms. Ich verwende es für eine Web-App, die in Kombination mit einem Bluetooth-Scanner verwendet wird, um das Zoomen der Seite beim Scannen eines Barcodes zu verhindern.
user128216
3
Ich stimme den Zielen der Empfehlungen zur Barrierefreiheit voll und ganz zu, aber es steht außer Frage, dass es Zeiten gibt, in denen kein Zoom gewünscht oder benötigt wird oder sogar die Benutzererfahrung beeinträchtigt. Plus, wissen Sie, Kunden.
Chuck Le Butt
2
Ich würde sagen, dass in einer HTML / Javascript-App diese Richtlinien nicht gelten. Würde eine native App Sie schließlich vergrößern und verkleinern lassen?
Jörgen Sigvardsson
-5

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">
Cihan Zengin
quelle