risposta-alla-domanda-sullo-sviluppo-web-bd.com

Qual è il punto di "meta viewport user-scalable = no" nell'API di Google Maps

Sto usando l'API JavaScript di Google Maps V3 e gli esempi ufficiali hai sempre incluso questo meta tag:

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

La maggior parte degli esempi di terze parti che ho visto lo fanno anche. Ho scritto un plugin utilizzandolo, tuttavia, e uno dei miei utenti mi ha detto che gli sta impedendo di poter ingrandire e rimpicciolire sul suo dispositivo mobile . Non ho un dispositivo mobile con cui testare e nessuna delle mie ricerche ha rivelato informazioni utili.

Allora, qual è il punto del tag? Dovrei lasciarlo dentro? Devo provare a rilevare l'agente del browser e mostrarlo solo per i browser desktop?

Se si desidera esaminare il plug-in, è possibile scaricarlo , sfogliare la fonte o vedere un esempio dal vivo .

89
Ian Dunn

Su molti dispositivi (come l'iPhone), impedisce all'utente di utilizzare lo zoom del browser. Se hai una mappa e il browser esegue lo zoom, l'utente vedrà una grande immagine pixelata con enormi etichette pixelate. L'idea è che l'utente dovrebbe utilizzare lo zoom fornito da Google Maps. Non sono sicuro di qualsiasi interazione con il tuo plugin, ma è per questo che è lì.

Più di recente, come osserva @ehfeng nella sua risposta, Chrome per Android (e forse altri) hanno approfittato del fatto che non esiste uno zoom nativo del browser su pagine con un tag viewport impostato in questo modo. Ciò consente loro di sbarazzarsi del temuto ritardo di 300 ms sugli eventi touch che il browser impiega ad attendere e vedere se il tuo singolo tocco finirà per essere un doppio tocco (Pensa a "singolo clic" e "doppio clic".) Tuttavia, quando questa domanda è stata originariamente posta (nel 2011), questo non era vero in nessun browser mobile. È appena stata aggiunta una meraviglia che è nata casualmente più di recente.

100
Trott

La disabilitazione del ridimensionamento utente (ovvero la possibilità di toccare due volte per ingrandire) consente al browser di ridurre il ritardo del clic. Nei browser abilitati al tocco, quando l'utente si aspetta che il doppio tocco esegua lo zoom, il browser in genere attende 300 ms prima di attivare l'evento clic, in attesa di vedere se l'utente doppio tocco. La disabilitazione della scalabilità utente consente al Chrome browser di attivare immediatamente l'evento click, consentendo un'esperienza utente migliore.

Da Google IO sessione 2013 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

Aggiornamento: non è più vero, <meta name="viewport" content="width=device-width"> è sufficiente per rimuovere il ritardo di 300 ms

39
ehfeng

Dalla documentazione v (Guida per gli sviluppatori> Concetti> Sviluppo per dispositivi mobili):

I dispositivi Android e iOS rispettano il seguente tag <meta>:

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

Questa impostazione specifica che la mappa deve essere visualizzata a schermo intero e non deve essere ridimensionabile dall'utente. Nota che il browser Safari dell'iPhone richiede che questo tag <meta> Sia incluso nell'elemento <head> Della pagina.

9
stank345

Non utilizzare affatto il meta tag viewport se il design non risponde. L'uso improprio di questo tag può portare a layout non funzionanti. Puoi leggere questo articolo per la documentazione sul perché non dovresti usare questo tag se non sai cosa stai facendo. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" aiuta anche a prevenire l'effetto zoom-in sulle caselle di input di iOS.

1
Horia Rudan