mobile - que - viewport definicion
¿Cuál es el objetivo de ''meta viewport user-scalable=no'' en la API de Google Maps? (4)
Al deshabilitar la escalabilidad del usuario (es decir, la capacidad de tocar dos veces para acercar o alejar), el navegador puede reducir el retraso de clics. En los navegadores de activación táctil, cuando el usuario espera el doble toque para hacer zoom, el navegador generalmente espera 300 ms antes de disparar el evento de clic, esperando ver si el usuario toca dos veces. Al deshabilitar la escalabilidad del usuario, el navegador Chrome activa el evento de clic inmediatamente, lo que permite una mejor experiencia del 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 300ms de retraso
Estoy usando Google Maps JavaScript API V3 y los ejemplos oficiales siempre tienen que incluir 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 plugin para usarlo, y uno de mis usuarios me dijo que le impedía acercarse y alejarse en su dispositivo móvil . No tengo un dispositivo móvil para probar, y ninguna de mis búsquedas reveló información útil.
Entonces, ¿cuál es el objetivo de la etiqueta? ¿Debo dejarlo? ¿Debo tratar de detectar el agente del navegador y solo mostrarlo para los navegadores de escritorio?
Si desea examinar el complemento, puede descargarlo , explorar la fuente o ver un ejemplo en vivo .
De la documentación v3 (Guía del desarrollador> Conceptos> Desarrollo para dispositivos móviles):
Los dispositivos Android e iOS respetan la siguiente etiqueta
<meta>:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />Esta configuración especifica que el mapa debe mostrarse a pantalla completa y el usuario no debe poder redimensionarlo. Tenga en cuenta que el navegador Safari del iPhone requiere que esta etiqueta
<meta>se incluya dentro del elemento<head>la página.
En muchos dispositivos (como el iPhone), evita que el usuario use el zoom del navegador. Si tiene un mapa y el navegador realiza 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 cualquier interacción con su complemento, pero eso es lo que está ahí.
Más recientemente, como notas de @ehfeng en su respuesta, Chrome para Android (y tal vez otros) se han aprovechado del hecho de que no hay un navegador nativo que haga zoom en las páginas con una etiqueta de ventana configurada así. Esto les permite deshacerse de la temida demora de 300 ms en los eventos táctiles que el navegador tarda en esperar y ver si su único toque terminará siendo un doble toque. (Piense en "un solo clic" y "doble clic"). Sin embargo, cuando esta pregunta se realizó originalmente (en 2011), no fue así en ningún navegador móvil. Es solo una maravilla añadida que surgió fortuitamente más recientemente.
No debe usar la metaetiqueta de la ventana gráfica si su diseño no responde. Mal uso de esta etiqueta puede conducir a diseños rotos. 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-escalable = no" también ayuda a evitar el efecto de acercamiento en los cuadros de entrada de iOS.