Ansichtsfenster deaktivieren Zoomen iOS 10+ Safari?

164

Ich habe mein iPhone 6 plus auf die Beta-Version von iOS 10 aktualisiert und festgestellt, dass Sie in der mobilen Safari alle Webseiten zoomen können, indem Sie zweimal auf den user-scalable=noCode im Meta-Tag tippen oder ihn kneifen . Ich weiß nicht, ob es sich um einen Fehler oder eine Funktion handelt. Wie deaktivieren wir das Zoomen von iOS 10-Safari im Ansichtsfenster, wenn dies als Funktion betrachtet wird?


Aktualisiert auf iOS 11/12, iOS 11 und iOS 12 Safari respektieren das Meta-Tag immer noch NICHTuser-scalable=no .

mobile Github-Site auf Safari

Sam Su
quelle
2
Eine Barrierefreiheitsfunktion: Bemerkenswert in Safari unter iOS 10 twitter.com/thomasfuchs/status/742531231007559680/photo/1
ErikE
87
Nein, ist es nicht. Es ist eine schlechte Praxis für normale Webinhalte. Bei Web-Apps kann das Standard-Zoomverhalten die Benutzerfreundlichkeit vollständig beeinträchtigen. Zum Beispiel möchte niemand eine Kanal-Up-Taste vergrößern, weil er zweimal darauf getippt hat, und einen Teil eines Videospiels nicht vergrößern, weil er zweimal auf die Sprungtaste getippt hat. Es gibt einen Grund, warum diese Funktion überhaupt hinzugefügt wurde, und es macht keinen Sinn, die Benutzerfreundlichkeit für alle zu beeinträchtigen, nur weil einige "Webdesigner" nicht wissen, was sie tun. Schreien Sie die Site-Designer an und hören Sie auf, den Browser zu beschädigen.
Dgatwood
36
Zu sagen, es sei "schlechte Praxis", ist eine Meinung und ändert nichts an der Tatsache, dass Apple darauf besteht, Webstandards zu übernehmen, die die Community Monate / Jahre / Jahrzehnte damit verbringt, plattformübergreifend implementiert zu werden und einen riesigen Mist auf sie zu nehmen. Warum sollte Apple vorschreiben, dass Webdesigner nicht wissen, was sie tun? Schreckliches Argument.
Samrap
2
Persönlich denke ich, dass dies auf Online-Code zurückzuführen ist, bei dem Entwickler einfach blind kopieren und einfügen, ohne zu wissen, was der Zweck des Codes ist.
William Isted
7
Die Antwort ist einfach, Apple: Deaktivieren Sie das Meta-Tag als Standardeinstellung für die Barrierefreiheit. Diejenigen, die es brauchen, werden es haben, ohne diejenigen zu bestrafen, die es nicht tun.
Ruben Martinez Jr.

Antworten:

94

Es ist möglich, die Skalierung von Webseiten in Safari unter iOS 10 zu verhindern, aber es wird mehr Arbeit von Ihrer Seite erfordern. Ich denke, das Argument ist, dass ein gewisser Schwierigkeitsgrad verhindern sollte, dass Entwickler von Frachtkult "user-scalable = no" in jedes Ansichtsfenster-Tag fallen lassen und es für Benutzer mit Sehbehinderung unnötig schwierig machen.

Trotzdem würde ich gerne sehen, dass Apple seine Implementierung so ändert, dass es eine einfache Möglichkeit (Meta-Tag) gibt, das Doppeltippen zum Zoomen zu deaktivieren. Die meisten Schwierigkeiten beziehen sich auf diese Interaktion.

Mit so etwas können Sie das Zoomen stoppen:

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

Beachten Sie, dass, wenn tiefere Ziele stopPropagation für das Ereignis aufrufen, das Ereignis das Dokument nicht erreicht und das Skalierungsverhalten von diesem Listener nicht verhindert wird.

Das Deaktivieren von Double-Tap-to-Zoom ist ähnlich. Sie deaktivieren jedes Tippen auf das Dokument, das innerhalb von 300 Millisekunden nach dem vorherigen Tippen erfolgt:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

Wenn Sie Ihre Formularelemente nicht richtig eingerichtet haben, wird die Fokussierung auf eine Eingabe automatisch gezoomt. Da Sie den manuellen Zoom größtenteils deaktiviert haben, ist das Zoomen jetzt fast unmöglich. Stellen Sie sicher, dass die eingegebene Schriftgröße> = 16px ist.

Wenn Sie versuchen, dies in einem WKWebView in einer nativen App zu lösen, ist die oben angegebene Lösung sinnvoll. Dies ist jedoch eine bessere Lösung: https://stackoverflow.com/a/31943976/661418 . Und wie in anderen Antworten erwähnt, hat Apple in iOS 10 Beta 6 jetzt eine Flagge bereitgestellt, um das Meta-Tag zu ehren.

Update Mai 2017: Ich habe die alte Methode "Länge der Berührungen beim Berühren überprüfen" zum Deaktivieren des Pinch-Zooms durch einen einfacheren Ansatz "Prüfen von event.scale on touchmove" ersetzt. Sollte für alle zuverlässiger sein.

Joseph
quelle
3
Beachten Sie, dass Touchstart-Hack inkonsistent ist ... und wenn Sie es schaffen, ihn zu umgehen, stecken Sie in einem sehr unangenehmen Zustand fest
Sam Saffron
5
Z.B. Bei Vollbild-Mapping-Apps gibt es eine Zoomfunktion, die in der Mapping-Anwendung fest codiert ist (Google Maps JS, Leaflet usw.). Google empfiehlt, ein Meta-Tag hinzuzufügen. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />Wenn der Browser das Meta-Tag nicht berücksichtigt, ist das Browser-Design sehr schlecht. Das andere, wie sehr schlechtes Design, ist eine Vorwärts- / Rückwärtsbewegung durch Schieben, die in iOS 9/10 nicht verhindert werden kann. Es unterbricht stark schleppende Aktionen innerhalb der Webanwendung.
Timo Kähkönen
4
Wenn der Benutzer mit einem Finger zu ziehen beginnt und dann einen zweiten Finger auf den Bildschirm legt, kann er zoomen. Sie können sowohl Zoomen und Scrollen mit einem deaktivieren preventDefaultauf touchmove. Sie können den Zoom nicht (vollständig) deaktivieren, ohne den Bildlauf zu deaktivieren.
Paolo
10
Wow, dieser Teil (ich werde ihn hier einfügen) war für mich SUPER hilfreich. Ich habe dies von niemandem im Internet erwähnt gesehen. Ich habe Stunden gebraucht, um dieses Problem zu beheben. Ich bin wirklich enttäuscht von Apples UX-Designentscheidungen, bei denen Formulare automatisch vergrößert werden, aber dann nicht wieder herauszoomen. If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.
Ryan
6
Es scheint, dass dies in iOS 12 nicht mehr funktioniert. Irgendeine Idee, wie dies für iOS 12 funktioniert?
TJR