Qual é o ponto de 'meta viewport user-scalable = no' na API do Google Maps

98

Estou usando a API JavaScript V3 do Google Maps e os exemplos oficiais sempre incluem esta metatag:

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

A maioria dos exemplos de terceiros que vi também fazem isso. No entanto, escrevi um plugin usando-o e um de meus usuários me disse que ele está impedindo que ele amplie e reduza o zoom em seu dispositivo móvel . Não tenho um dispositivo móvel para testar e nenhuma das minhas pesquisas revelou qualquer informação útil.

Então, qual é o objetivo da tag? Devo deixar como está? Devo tentar detectar o agente do navegador e mostrá-lo apenas para navegadores de desktop?

Se você deseja examinar o plugin, pode baixá-lo , navegar na fonte ou ver um exemplo ao vivo .

mobile google-maps-api-3 viewport meta-tags Ian Dunn
fonte
btw, Chrome escreve no console "A chave" escalonável pelo usuário "não é reconhecida e ignorada." se você usar, mesmo com o valor "sim" - OOPS, só notei que tenho um "e" em "escalável", como se pudesse ter "escamas (um dragão) :-)
George Birbilis

Respostas:

110

Em muitos dispositivos (como o iPhone), impede o usuário de usar o zoom do navegador. Se você tiver um mapa e o navegador fizer o zoom, o usuário verá uma grande e velha imagem pixelada com enormes rótulos pixelados. A ideia é que o usuário use o zoom disponibilizado pelo Google Maps. Não tenho certeza sobre qualquer interação com o seu plugin, mas é para isso que existe.

Mais recentemente, como @ehfeng observou em sua resposta, o Chrome para Android (e talvez outros) tirou vantagem do fato de que não há nenhum navegador nativo fazendo zoom em páginas com uma tag de janela de visualização definida como essa. Isso permite que eles se livrem do temido atraso de 300ms em eventos de toque que o navegador leva para esperar e ver se seu único toque acabará sendo um toque duplo. (Pense em "clique único" e "clique duplo".) No entanto, quando essa pergunta foi feita originalmente (em 2011), isso não era verdade em nenhum navegador móvel. É apenas uma maravilha adicionada que surgiu fortuitamente mais recentemente.

Trott
fonte
Acho que só desativa o zoom no iphone, ipad ... coisas de safari. meu android simplesmente o ignora (a parte escalonável pelo usuário, não o resto da tag da janela de visualização, é claro)
Juan
@Juan É mais do que apenas coisas do iOS / Safari. Aposto que está implementado no Chrome para Android, por exemplo. Mas sim, a janela de visualização não funciona em muitos navegadores Android 2.X.
Trott de
1
Não faça isso. Isso torna alguns sites inutilizáveis ​​no Firefox para Android (e talvez outros). Você não pode ter certeza de que sua página será exibida corretamente em todos os navegadores e, se remover o zoom, alguns usuários não conseguirão usar seu site. Pouco mais de 0,3 segundos. Yahoo Tech é um exemplo de um site ilegível no Firefox para Android porque não pode ser ampliado.
Josh
mais um efeito colateral interessante do user-scalable = no é que ele corrige problemas com a posição: menus fixos nos navegadores Android 2.X (embora você pudesse usar -webkit-backface-visibility: hidden;)
Christian Butzke 02 de
46

Desativar escalonável pelo usuário (ou seja, a capacidade de tocar duas vezes para aumentar o zoom) permite que o navegador reduza o atraso do clique. Em navegadores habilitados para toque, quando o usuário espera que o toque duplo dê zoom, o navegador geralmente espera 300 ms antes de disparar o evento de clique, esperando para ver se o usuário tocará duas vezes. Desativar escalonável pelo usuário permite que o navegador Chrome dispare o evento de clique imediatamente, permitindo uma melhor experiência do usuário.

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

Atualização: não é mais verdade, <meta name="viewport" content="width=device-width">é o suficiente para remover o atraso de 300ms

Ehfeng
fonte
por outro lado, isso não é bom para acessibilidade para usuários com deficiência. Acredito que as diretrizes da seção 508 especificam que um usuário deve ser capaz de aumentar o zoom em até 200%
Graham Fowles
9

Na documentação da v3 (Guia do desenvolvedor> Conceitos> Desenvolvimento para dispositivos móveis):

Os dispositivos Android e iOS respeitam a seguinte <meta>tag:

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

Esta configuração especifica que o mapa deve ser exibido em tela inteira e não deve ser redimensionável pelo usuário. Observe que o navegador Safari do iPhone requer que essa <meta>tag seja incluída no <head>elemento da página .

stank345
fonte
3

Você não deve usar a tag viewport meta em tudo se seu projeto não é responsivo. O uso incorreto dessa tag pode levar a layouts corrompidos. Você pode ler este artigo para obter a documentação sobre por que não deve usar essa tag, a menos que saiba o que está fazendo. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" também ajuda a evitar o efeito de ampliação nas caixas de entrada do iOS.

Horia Rudan
fonte