it-swarm.com.de

Wozu dient "Meta-Ansichtsfenster benutzerskalierbar = nein" in der Google Maps-API?

Ich verwende die Google Maps JavaScript-API V3 und die offiziellen Beispiele habe immer dieses Meta-Tag angegeben:

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

Die meisten Beispiele von Drittanbietern, die ich gesehen habe, haben dies auch getan. Ich habe ein Plugin geschrieben, das es verwendet, und einer meiner Benutzer sagte mir, dass es ihn daran hindert, auf seinem Mobilgerät hinein- und herauszuzoomen . Ich habe kein Mobilgerät zum Testen und keine meiner Suchanfragen ergab hilfreiche Informationen.

Wozu dient der Tag? 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 .

89
Ian Dunn

Auf vielen Geräten (wie dem iPhone) kann der Benutzer den Zoom des Browsers nicht verwenden. Wenn Sie über eine Karte verfügen und der Browser zoomt, wird dem Benutzer ein großes, altes Pixelbild mit großen Pixelbeschriftungen angezeigt. Die Idee ist, dass der Benutzer das Zoomen von Google Maps verwenden sollte. Ich bin mir nicht sicher, ob ich mit deinem Plugin interagieren soll, aber dafür ist es da.

Wie @ehfeng in seiner Antwort bemerkte, haben in jüngerer Zeit Chrome for Android (und vielleicht auch andere)) die Tatsache ausgenutzt, dass kein nativer Browser zoomt Seiten mit einem Ansichtsfenster-Tag, das wie folgt gesetzt ist: Auf diese Weise können sie die gefürchtete Verzögerung von 300 ms bei Berührungsereignissen, die der Browser abwartet, beseitigen und feststellen, ob Ihre einzelne Berührung eine doppelte Berührung ist "Doppelklick".) Als diese Frage ursprünglich (im Jahr 2011) gestellt wurde, stimmte dies jedoch nicht für jeden mobilen Browser. Es wurde lediglich eine Überraschung hinzugefügt, die in jüngerer Zeit zufällig auftrat.

100
Trott

Durch Deaktivieren der benutzerdefinierten Skalierbarkeit (dh durch zweimaliges Tippen zum Zoomen) kann der Browser die Klickverzögerung verringern. In Browsern mit aktivierter Berührung wartet der Browser in der Regel 300 ms, bevor er das Klickereignis auslöst, und wartet dann darauf, ob der Benutzer zweimal tippt. Durch Deaktivieren der benutzerdefinierten Skalierbarkeit kann der Browser Chrome=) das Klickereignis sofort auslösen, um die Benutzerfreundlichkeit zu verbessern.

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 eine Verzögerung von 300 ms zu beseitigen

39
ehfeng

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

Android- und iOS-Geräte respektieren 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 und vom Benutzer nicht in der Größe geändert werden soll. Beachten Sie, dass der Safari-Browser des iPhones erfordert, dass dieses <meta> - Tag im <head> - Element der Seite enthalten ist.

9
stank345

Sie sollten das Viewport-Meta-Tag überhaupt nicht verwenden , wenn Ihr Design nicht reagiert. Die missbräuchliche Verwendung dieses Tags kann zu fehlerhaften Layouts führen. Sie können diesen Artikel lesen, um zu dokumentieren, 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" hilft auch dabei, den Zoom-in-Effekt auf iOS-Eingabefeldern zu verhindern.

1
Horia Rudan