À quoi sert "meta viewport user-scalable = no" dans l'API Google Maps

98

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 .

— Ian Dunn
source

btw, Chrome écrit dans la console "La clé" évolutive par l'utilisateur "n'est pas reconnue et ignorée." si vous l'utilisez, même avec une valeur "oui" - OOPS, vient de remarquer que j'ai un "e" dans "évolutif", comme s'il pouvait avoir des "écailles (un dragon) :-)

— George Birbilis

110

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.

— Trott
source

Je pense que cela désactive uniquement le zoom sur l'iphone, l'ipad .. des trucs safari. mon Android l'ignore simplement (la partie évolutive par l'utilisateur, pas le reste de la balise viewport bien sûr)

— Juan

@Juan C'est plus que des trucs iOS / Safari. Je parie qu'il est implémenté dans Chrome pour Android, par exemple. Mais oui, les éléments de la fenêtre d'affichage ne fonctionnent pas dans de nombreux navigateurs Android 2.X.

— Trott

1

Ne fais pas ça. Cela rend certains sites Web inutilisables sur Firefox pour Android (et peut-être d'autres). Vous ne pouvez pas être sûr que votre page s'affichera correctement sur tous les navigateurs, et si vous supprimez le zoom, certains utilisateurs ne pourront pas utiliser votre site. Un peu plus de 0,3 seconde. Yahoo Tech est un exemple de site illisible sur Firefox pour Android car il ne peut pas être zoomé.

— Josh

un autre effet secondaire intéressant de user-scalable = no est qu'il corrige des problèmes de position: menus fixes sur les navigateurs Android 2.X (bien que vous puissiez utiliser -webkit-backface-visibilité: hidden;)

— Christian Butzke

46

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 300ms

— ehfeng
source

d'un autre côté, ce n'est pas bon pour l'accessibilité pour les utilisateurs handicapés. Je crois que les directives de l'article 508 spécifient qu'un utilisateur doit être capable de zoomer jusqu'à 200%

— Graham Fowles

9

À partir de la documentation v3 (Guide du développeur> Concepts> Développement pour les appareils mobiles):

Les appareils Android et iOS respectent la <meta>balise suivante :
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Ce paramètre spécifie que la carte doit être affichée en plein écran et ne doit pas être redimensionnable par l'utilisateur. Notez que le navigateur Safari de l'iPhone nécessite que cette <meta>balise soit incluse dans l' <head>élément de la page .

— stank345
source

3

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.

— Horia Rudan
source