¿Cuál es el punto de 'meta viewport user-scalable = no' en la API de Google Maps?

98

Estoy usando la API de JavaScript de Google Maps V3 y los ejemplos oficiales siempre incluyen esta metaetiqueta:

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

La mayoría de los ejemplos de terceros que he visto también lo hacen. Sin embargo, escribí un complemento usándolo, y uno de mis usuarios me dijo que le impide poder acercarse y alejarse en su dispositivo móvil . No tengo un dispositivo móvil para realizar la prueba y ninguna de mis búsquedas reveló información útil.

Entonces, ¿cuál es el punto de la etiqueta? ¿Debería dejarlo? ¿Debo intentar detectar el agente del navegador y mostrarlo solo para navegadores de escritorio?

Si desea examinar el complemento, puede descargarlo , explorar la fuente o ver un ejemplo en vivo .

— Ian Dunn
fuente

Por cierto, Chrome escribe en la consola "La clave" escalable por el usuario "no se reconoce ni se ignora". si lo usa, incluso con el valor "sí" - OOPS, acabo de notar que tengo una "e" en "escalable", como si pudiera tener "escamas (un dragón) :-)

— George Birbilis

110

En muchos dispositivos (como el iPhone), evita que el usuario utilice el zoom del navegador. Si tiene un mapa y el navegador hace el zoom, el usuario verá una gran imagen pixelada con enormes etiquetas pixeladas. La idea es que el usuario utilice el zoom proporcionado por Google Maps. No estoy seguro de ninguna interacción con su complemento, pero para eso está.

Más recientemente, como señala @ehfeng en su respuesta, Chrome para Android (y quizás otros) se ha aprovechado del hecho de que no hay un navegador nativo que haga zoom en las páginas con una etiqueta de ventana gráfica configurada como esa. Esto les permite deshacerse del temido retraso de 300 ms en los eventos táctiles que el navegador necesita para esperar y ver si su único toque terminará siendo un doble toque. (Piense en "un solo clic" y "doble clic"). Sin embargo, cuando se hizo esta pregunta originalmente (en 2011), esto no era cierto en ningún navegador móvil. Es solo una maravilla adicional que surgió fortuitamente más recientemente.

— Trott
fuente

Creo que solo desactiva el zoom en iphone, ipad ... cosas de safari. mi Android simplemente lo ignora (la parte escalable por el usuario, no el resto de la etiqueta de la ventana gráfica, por supuesto)

— Juan

@Juan Es más que solo cosas de iOS / Safari. Apuesto a que está implementado en Chrome para Android, por ejemplo. Pero sí, las cosas de la ventana gráfica no funcionan en muchos navegadores con Android 2.X.

— Trott

1

No hagas eso. Inutiliza algunos sitios web en Firefox para Android (y quizás otros). No puede estar seguro de que su página se mostrará correctamente en todos los navegadores y, si elimina el zoom, algunos usuarios no podrán usar su sitio. Poco más de 0,3 segundos. Yahoo Tech es un ejemplo de un sitio que no se puede leer en Firefox para Android porque no se puede ampliar.

— Josh

Un efecto secundario más interesante de user-scalable = no es que soluciona problemas con la posición: menús fijos en los navegadores Android 2.X (aunque podría usar -webkit-backface-visible: hidden;)

— Christian Butzke

46

Deshabilitar la escalabilidad de usuario (es decir, la capacidad de tocar dos veces para hacer zoom) permite que el navegador reduzca el retraso del clic. En los navegadores táctiles, cuando el usuario espera que el doble toque para hacer zoom, el navegador generalmente espera 300 ms antes de disparar el evento de clic, esperando para ver si el usuario hace doble toque. La desactivación de la escalabilidad de usuario permite que el navegador Chrome active el evento de clic de inmediato, lo que permite una mejor experiencia de usuario.

De la sesión de Google IO 2013 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

Actualización: ya no es cierto, <meta name="viewport" content="width=device-width">es suficiente para eliminar el retraso de 300 ms

— ehfeng
fuente

por otro lado, esto no es bueno para la accesibilidad de los usuarios discapacitados. Creo que las pautas de la sección 508 especifican que un usuario debe poder acercar hasta un 200%

— Graham Fowles

9

De la documentación v3 (Guía del desarrollador> Conceptos> Desarrollo para dispositivos móviles):

Los dispositivos Android e iOS respetan la siguiente <meta>etiqueta:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Esta configuración especifica que el mapa debe mostrarse en pantalla completa y el usuario no debe cambiar su tamaño. Tenga en cuenta que el navegador Safari del iPhone requiere que esta <meta>etiqueta se incluya dentro del <head>elemento de la página .

— apestaba345
fuente

3

No debe usar la metaetiqueta de la ventana gráfica en absoluto si su diseño no responde. El uso indebido de esta etiqueta puede dar lugar a diseños incorrectos. Puede leer este artículo para obtener documentación sobre por qué no debería usar esta etiqueta a menos que sepa lo que está haciendo. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" también ayuda a evitar el efecto de zoom en los cuadros de entrada de iOS.

— Horia Rudan
fuente