Was bringt "Meta Viewport User-Scalable = No" in der Google Maps-API?

97

Ich verwende die Google Maps JavaScript API V3 und in den offiziellen Beispielen ist immer dieses Meta-Tag enthalten:

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

Die meisten Beispiele von Drittanbietern, die ich gesehen habe, tun dies auch. Ich habe jedoch ein Plugin geschrieben, das es verwendet, und einer meiner Benutzer sagte mir, dass es ihn daran hindere, sein Mobilgerät zu vergrößern und zu verkleinern . Ich habe kein mobiles Gerät zum Testen und keine meiner Suchanfragen ergab hilfreiche Informationen.

Also, was ist der Sinn des Tags? Soll ich es drin lassen? Sollte ich versuchen, den Browser-Agenten zu erkennen und nur für Desktop-Browser anzuzeigen?

Wenn Sie das Plugin untersuchen möchten, können Sie es herunterladen , die Quelle durchsuchen oder ein Live-Beispiel anzeigen .

mobile google-maps-api-3 viewport meta-tags Ian Dunn
quelle
Übrigens schreibt Chrome in die Konsole "Der Schlüssel" benutzerskalierbar "wird nicht erkannt und ignoriert." Wenn Sie es verwenden, auch mit "Ja" -Wert - OOPS, habe ich gerade bemerkt, dass ich ein "e" in "skalierbar" habe, als ob es "Skalen (ein Drache) haben kann :-)
George Birbilis

Antworten:

109

Auf vielen Geräten (z. B. dem iPhone) wird verhindert, dass der Benutzer den Zoom des Browsers verwendet. Wenn Sie eine Karte haben und der Browser das Zoomen durchführt, sieht der Benutzer ein großes altes Pixelbild mit riesigen Pixelbeschriftungen. Die Idee ist, dass der Nutzer das von Google Maps bereitgestellte Zoomen verwenden sollte. Ich bin mir nicht sicher, ob ich mit Ihrem Plugin interagiere, aber dafür ist es da.

In jüngerer Zeit hat Chrome für Android (und vielleicht auch andere), wie @ehfeng in seiner Antwort feststellt, die Tatsache ausgenutzt, dass kein nativer Browser auf Seiten mit einem solchen Ansichtsfenster-Tag zoomt. Auf diese Weise können sie die gefürchtete Verzögerung von 300 ms bei Berührungsereignissen beseitigen, die der Browser benötigt, um abzuwarten, ob Ihre einzelne Berührung eine doppelte Berührung ist. (Denken Sie an "Einzelklick" und "Doppelklick".) Als diese Frage ursprünglich gestellt wurde (im Jahr 2011), traf dies jedoch in keinem mobilen Browser zu. Es ist nur eine Attraktivität hinzugefügt, die in jüngerer Zeit zufällig entstanden ist.

Trott
quelle
Ich denke, es deaktiviert nur das Zoomen in iPhone, iPad .. Safari Zeug. Mein Android ignoriert es einfach (der vom Benutzer skalierbare Teil, natürlich nicht der Rest des Viewport-Tags)
Juan
@Juan Es ist mehr als nur iOS / Safari-Zeug. Ich wette, es ist zum Beispiel in Chrome für Android implementiert. Aber ja, das Ansichtsfenster funktioniert in vielen Android 2.X-Browsern nicht.
Trott
1
Tu das nicht. Dadurch werden einige Websites unter Firefox für Android (und möglicherweise auch andere) unbrauchbar. Sie können nicht sicher sein, dass Ihre Seite in allen Browsern korrekt angezeigt wird. Wenn Sie das Zoomen entfernen, können einige Benutzer Ihre Website nicht verwenden. Etwas mehr als 0,3 Sekunden. Yahoo Tech ist ein Beispiel für eine Website, die unter Firefox für Android nicht lesbar ist, da sie nicht gezoomt werden kann.
Josh
Ein weiterer interessanter Nebeneffekt von User-Scalable = No ist, dass es Probleme mit der Position behebt: Behobene Menüs in Android 2.X-Browsern (obwohl Sie -wekkit-backface-sichtbarkeit verwenden könnten: versteckt;)
Christian Butzke
46

Durch Deaktivieren der vom Benutzer skalierbaren Funktion (dh zweimaliges Tippen zum Zoomen) kann der Browser die Klickverzögerung verringern. Wenn der Benutzer in Touch-Enable-Browsern erwartet, dass das doppelte Tippen gezoomt wird, wartet der Browser im Allgemeinen 300 ms, bevor er das Klickereignis auslöst, und wartet, ob der Benutzer doppelt tippen wird. Durch Deaktivieren der Benutzerskalierbarkeit kann der Chrome-Browser das Klickereignis sofort auslösen, um eine bessere Benutzererfahrung zu erzielen.

Aus der Google IO 2013-Sitzung https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

Update: Es ist nicht mehr wahr, <meta name="viewport" content="width=device-width">reicht aus, um die Verzögerung von 300 ms zu beseitigen

ehfeng
quelle
Auf der anderen Seite ist dies nicht gut für die Zugänglichkeit für behinderte Benutzer. Ich glaube, dass die Richtlinien in Abschnitt 508 festlegen, dass ein Benutzer in der Lage sein muss, bis zu 200% zu zoomen
Graham Fowles
9

Aus der v3-Dokumentation (Entwicklerhandbuch> Konzepte> Entwickeln für mobile Geräte):

Android- und iOS-Geräte beachten das folgende <meta>Tag:

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

Diese Einstellung gibt an, dass die Karte im Vollbildmodus angezeigt werden soll und vom Benutzer nicht in der Größe geändert werden kann. Beachten Sie, dass für den Safari-Browser des iPhones dieses <meta>Tag im <head>Element der Seite enthalten sein muss .

stank345
quelle
3

Sie sollten das Ansichtsfenster-Meta-Tag überhaupt nicht verwenden, wenn Ihr Design nicht reagiert. Der Missbrauch dieses Tags kann zu fehlerhaften Layouts führen. In diesem Artikel erfahren Sie, warum Sie dieses Tag nicht verwenden sollten, es sei denn, Sie wissen, was Sie tun. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" verhindert auch den Zoom-In-Effekt auf iOS-Eingabefelder.

Horia Rudan
quelle