html - tag - Desactivar zoom de pellizco en la Web móvil

meta tag scalable no

Question

Quiero desactivar Pinch y Zoom en dispositivos móviles.

¿Qué configuración debo agregar a la ventana gráfica?

Enlace: http://play.mink7.com/n/dawn/

Answer 1

Esto es todo lo que necesitaba:

<meta name="viewport" content="user-scalable=no"/>

Answer 2

IE tiene su propio camino: una propiedad css, -ms-content-zooming. Ponerlo en ninguno en el cuerpo o algo así debería deshabilitarlo.

Deshabilitar pellizcar para acercar IE10

http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

Answer 3

Lamentablemente, la solución ofrecida no funciona en Safari 10+, ya que Apple ha decidido ignorar user-scalable=no . Este hilo tiene más detalles y algunos hacks JS: ¿ desactivar la vista de zoom de iOS 10+ Safari?

Answer 4

Para todos los que dijeron que esta es una mala idea, quiero decir que no siempre es mala. A veces es muy aburrido tener que alejarse para ver todo el contenido. Por ejemplo, cuando escribe en una entrada en iOS, se acerca para colocarla en el centro de la pantalla. Tienes que alejar la imagen después de eso porque cerrar el teclado no hace el trabajo. También estoy de acuerdo en que cuando dedicas muchas horas a hacer un diseño y una experiencia de usuario geniales, no quieres que se estropee con un zoom.

Pero el otro argumento también es valioso para las personas con problemas de visión. Sin embargo, en mi opinión, si tiene problemas con sus ojos, ya está utilizando las funciones de zoom del sistema para que no haya necesidad de alterar el contenido.

Answer 5

Pruebe con la propiedad min-width. Déjame explicarte. Supongamos un dispositivo con un ancho de pantalla de 400px (por ejemplo). Cuando haces zoom, las fuentes se hacen cada vez más grandes. Pero las cajas y los divs permanecen con el mismo ancho. Si usa min-width, puede evitar disminuir su div y box.

Answer 6

here se puede usar user-scalable=no :

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

Answer 7

EDITAR: como esto se sigue comentando, todos sabemos que no deberíamos hacer esto. La pregunta era cómo lo hago, no debería hacerlo.

Agregue esto a su para dispositivos móviles. Luego haz tus anchuras en porcentajes y estarás bien:

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

Agregue esto para los dispositivos que no pueden usar la ventana gráfica también:

<meta name="HandheldFriendly" content="true" />