J'utilise l'API JavaScript de Google Maps V3 et les exemples officiels incluent toujours cette balise Meta:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />La plupart des exemples tiers que j'ai vus le font également. J'ai cependant écrit un plugin en l'utilisant et l'un de mes utilisateurs m'a dit que cela l'empêchait de pouvoir zoomer et dézoomer sur son appareil mobile . Je n'ai pas d'appareil mobile à tester et aucune de mes recherches n'a révélé d'informations utiles.
Alors, quel est l'intérêt de la balise? Dois-je le laisser? Dois-je essayer de détecter l'agent de navigateur et de l'afficher uniquement pour les navigateurs de bureau?
Si vous souhaitez examiner le plugin, vous pouvez le télécharger , parcourir la source ou voir un exemple en direct .
mobile
google-maps-api-3
viewport
meta-tags
Ian Dunn
la source
la source
Réponses:
Sur de nombreux appareils (comme l'iPhone), il empêche l'utilisateur d'utiliser le zoom du navigateur. Si vous avez une carte et que le navigateur effectue le zoom, l'utilisateur verra une grande image pixélisée avec d'énormes étiquettes pixélisées. L'idée est que l'utilisateur doit utiliser le zoom fourni par Google Maps. Je ne suis pas sûr de toute interaction avec votre plugin, mais c'est pour cela qu'il est là.
Plus récemment, comme le note @ehfeng 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 qui effectue un zoom sur les pages avec une balise de fenêtre définie comme celle-ci. Cela leur permet de se débarrasser du redoutable délai de 300 ms sur les événements tactiles que le navigateur prend pour attendre et voir si votre simple toucher finira par être un double toucher. (Pensez au «simple clic» et au «double clic».) Cependant, lorsque cette question a été posée à l'origine (en 2011), ce n'était pas le cas dans aucun navigateur mobile. C'est juste ajouté génialité qui est survenue fortuitement plus récemment.
la source
La désactivation de la fonction évolutive par l'utilisateur (à savoir, la possibilité de toucher deux fois pour zoomer) permet au navigateur de réduire le délai de clic. Dans les navigateurs tactiles, lorsque l'utilisateur s'attend à ce que le double tap pour zoomer, le navigateur attend généralement 300 ms avant de déclencher l'événement de clic, attendant de voir si l'utilisateur appuiera deux fois. La désactivation de la fonction évolutive par l'utilisateur permet au navigateur Chrome de déclencher immédiatement l'événement de clic, ce qui permet une meilleure expérience utilisateur.
De la session Google IO 2013 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s
Mise à jour: ce n'est plus vrai,
<meta name="viewport" content="width=device-width">suffit pour supprimer un délai de 300msla source
À partir de la documentation v3 (Guide du développeur> Concepts> Développement pour les appareils mobiles):
la source
Vous ne devez pas utiliser la balise meta fenêtre du tout si votre conception ne répond pas. Une mauvaise utilisation de cette balise peut entraîner des mises en page brisées. Vous pouvez lire cet article pour savoir pourquoi vous ne devriez pas utiliser cette balise à moins que vous ne sachiez ce que vous faites. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
"user-scalable = no" permet également d'éviter l'effet de zoom sur les zones de saisie iOS.
la source