Desactivar el zoom de pellizco en la web móvil

Quiero desactivar Pellizcar y hacer zoom en dispositivos móviles.

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

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

EDITAR: Debido a que esto sigue siendo comentado, 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, haga sus anchos en porcentajes y estará bien:

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

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

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

esto evitará cualquier acción de zoom por parte del usuario en ios safari y también evitará la función "acercar a pestañas":

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

jsfiddle: https://jsfiddle.net/vo0aqj4y/11/

Esto es todo lo que necesitaba:

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

A todos los que dijeron que esta es una mala idea, quiero decirles que no siempre es mala. A veces es muy aburrido tener que alejarse para ver todo el contenido. Por ejemplo, cuando escribe una entrada en iOS, se amplía para colocarla en el centro de la pantalla. Tienes que alejar el zoom 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 gran diseño y experiencia de usuario, no querrás 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 los ojos, ya está utilizando las funciones de zoom del sistema, por lo que no es necesario alterar el contenido.

Desafortunadamente, la solución ofrecida no funciona en Safari 10+, ya que Apple ha decidido ignorarla user-scalable=no. Este hilo tiene más detalles y algunos trucos de JS: ¿ deshabilitar el zoom de la ventana gráfica en iOS 10+ safari?

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

Desactivar pellizcar para hacer zoom en IE10

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

Encontrado aquí puede usar user-scalable=no:

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

Creo que lo que puede estar buscando es la acción táctil de la propiedad CSS . Solo necesitas una regla CSS como esta:

html, body {touch-action: none;}

Verá que tiene un soporte bastante bueno ( https://caniuse.com/#feat=mdn-css_properties_touch-action_none ), incluido Safari, así como también de regreso a IE10.

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

No estoy seguro de si esto podría ayudar, pero resolví el problema de pellizco / zoom (quería evitar que los usuarios hicieran zoom en mi aplicación web) usando el módulo de martillo angular:

En mi app.component.html agregué:

<div id="app" (pinchin)="pinchin();">

y en mi app.component.ts:

  pinchin() {
      //console.log('pinch in');
  }