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 .
mobile
google-maps-api-3
viewport
meta-tags
Ian Dunn
fuente
fuente
Respuestas:
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.
fuente
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 msfuente
De la documentación v3 (Guía del desarrollador> Conceptos> Desarrollo para dispositivos móviles):
fuente
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.
fuente