Quel est l'intérêt de "meta viewport user-scalable = no" dans l'API Google Maps

Question

Je suis en utilisant Google Maps JavaScript API V3 et l'officiel des exemples toujours avez-vous d'inclure cette balise meta:

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

La plupart de la 3e partie des exemples que j'ai vu aussi le faire. J'ai écrit un plugin à l'aide de l'informatique, cependant, et l'un de mes utilisateurs me dit que c'est lui empêchant d'être en mesure de zoomer et dézoomer sur son appareil mobile. Je n'ai pas un appareil mobile afin de le tester, et aucun de mes recherches ont révélé aucune information utile.

Donc, quel est le point de la balise? Dois-je le laisser? Devrais-je essayer de détecter le navigateur de l'agent et de montrer uniquement pour les navigateurs de bureau?

Si vous voulez examiner le plugin, vous pouvez le télécharger, parcourir la source ou voir un exemple vivant.

Answer 1

Sur de nombreux appareils (comme l'iPhone), il empêche l'utilisateur d'utiliser le navigateur de zoom. Si vous avez une carte et le navigateur ne le zoom, puis l'utilisateur verra un grand ol' image pixélisée avec d'énormes pixélisé étiquettes. L'idée est que l'utilisateur doit utiliser le zoom fourni par Google Maps. Pas sûr au sujet de l'interaction avec votre plugin, mais qu'est ce que ça existe.

Plus récemment, en tant que @ehfeng notes, dans sa réponse, Chrome pour Android (et peut-être d'autres) ont profité du fait qu'il n'y a pas de navigateur natif de zoom sur les pages avec une fenêtre d'affichage de la balise ensemble comme ça. Cela leur permet de se débarrasser de la redoutable 300ms de retard sur les événements tactiles que le navigateur prend à attendre et voir si votre touche unique sera à la fin d'un double contact. (Pensez à "simple clic" et le "double clic".) Toutefois, lorsque cette question a été initialement demandé (en 2011), ce n'était pas vrai dans n'importe quel navigateur mobile. Il est juste d'ajouter awesomeness qui par hasard se pose plus récemment.

Answer 2

La désactivation de l'utilisateur évolutive (à savoir, la capacité de double tap pour zoomer) permet au navigateur de réduire le clic de retard. Le contact permettent aux navigateurs, lorsque l'utilisateur s'attend à ce que le double tap pour zoomer, le navigateur généralement attend 300 ms avant le déclenchement de l'événement de clic, en attendant de voir si l'utilisateur double-tap. La désactivation de l'utilisateur évolutive permet pour le navigateur google Chrome pour déclencher l'événement click immédiatement, permettant ainsi une meilleure expérience utilisateur.

À partir de Google IO 2013 session https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

Answer 3

À partir de la v3 de la documentation (Guide du Développeur > Concepts > Développement pour Appareils Mobiles):

Android et iOS dispositifs de respecter la balise suivante:

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

Ce paramètre indique que la carte devrait être affichée en plein écran et ne doit pas être redimensionnable par l'utilisateur. Notez que l'iPhone navigateur Safari exige cette balise être inclus dans la page de l'élément.

Answer 4

Vous ne devriez pas utiliser la fenêtre d'affichage de la balise meta à tous , si votre design n'est pas adapté. Miss utilisant cette balise peut conduire à cassé les mises en page. Vous pouvez lire cet article pour la documentation au sujet de pourquoi vous devez n'utiliser cette balise, sauf si vous savez ce que vous faites. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable=no" contribue également à prévenir le zoom-in d'effet sur iOS les zones d'entrée.