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

98

Utilizzo l'API JavaScript di Google Maps V3 e gli esempi ufficiali includono sempre questo meta tag:

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

Anche la maggior parte degli esempi di terze parti che ho visto lo fanno. Ho scritto un plugin usandolo, però, e uno dei miei utenti mi ha detto che gli impedisce di ingrandire e ridurre il suo dispositivo mobile . Non ho un dispositivo mobile con cui eseguire il test 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 vuoi esaminare il plugin, puoi scaricarlo , sfogliare la fonte o vedere un esempio dal vivo .

mobile  google-maps-api-3  viewport  meta-tags 
— Ian Dunn
fonte
btw, Chrome scrive nella console "La chiave" scalabile dall'utente "non viene riconosciuta e ignorata." se lo usi, anche con valore "sì" - OOPS, ho appena notato che ho una "e" in "scalabile", come se potesse avere "scale (un drago) :-)
— George Birbilis

Risposte:

110

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 vecchia immagine pixelata con enormi etichette pixelate. L'idea è che l'utente debba utilizzare lo zoom fornito da Google Maps. Non sono sicuro di alcuna interazione con il tuo plugin, ma è lì per questo.

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

— Trott
fonte
Penso che disabiliti solo lo zoom in iphone, ipad .. roba safari. il mio androide lo ignora (la parte scalabile dall'utente, non il resto del tag viewport ovviamente)
— Juan
@Juan È più di un semplice iOS / Safari. Scommetto che è implementato in Chrome per Android, ad esempio. Ma sì, le cose del viewport non funzionano in molti browser Android 2.X.
— Trott
1
Non farlo. Rende alcuni siti Web inutilizzabili su Firefox per Android (e forse altri). Non puoi essere sicuro che la tua pagina verrà visualizzata correttamente su tutti i browser e, se rimuovi lo zoom, alcuni utenti non saranno in grado di utilizzare il tuo sito. Poco più di 0,3 secondi. Yahoo Tech è un esempio se un sito è illeggibile su Firefox per Android perché non può essere ingrandito.
— Josh
un altro effetto collaterale interessante di user-scalable = no è che risolve i problemi con la posizione: menu fissi sui browser Android 2.X (anche se potresti usare -webkit-backface-visibilità: nascosto;)
— Christian Butzke
46

La disabilitazione della scalabilità dell'utente (ovvero la possibilità di effettuare un doppio tocco 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 effettui lo zoom, il browser generalmente attende 300 ms prima di attivare l'evento clic, in attesa di vedere se l'utente effettuerà un doppio tocco. La disabilitazione della scalabilità utente consente al browser Chrome di attivare immediatamente l'evento clic, consentendo una migliore esperienza utente.

Dalla sessione di Google IO 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 rimuovere 300 ms di ritardo

— ehfeng
fonte
d'altra parte questo non va bene per l'accessibilità per gli utenti disabili. Credo che le linee guida della sezione 508 specifichino che un utente deve essere in grado di ingrandire fino al 200%
— Graham Fowles
9

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

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

<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 <meta>tag sia incluso <head>nell'elemento della pagina .

— stank345
fonte
3

Non si deve usare il tag viewport meta affatto se il disegno non è reattivo. L'uso improprio di questo tag può portare a layout non funzionanti. Puoi leggere questo articolo per la documentazione sul motivo per cui non dovresti usare questo tag a meno che tu non sappia 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 sulle caselle di input di iOS.

— Horia Rudan
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.