Desactivar el zoom de pellizco en la web móvil

78

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/

Harsha MV
fuente
12
Espero que no esté creando un sitio web para una organización con sede en el Reino Unido; si lo está, deshabilitar la función de pellizcar para hacer zoom (efectivamente una función de accesibilidad) lo pondría en violación de varias leyes por discriminar activamente a las personas con discapacidad visual ... Nunca hay una buena razón para deshabilitar esta funcionalidad ... ¡Nunca!
Mike Insch
19
No siempre es mala idea. Si está creando una aplicación como una página web, eso es lo que haría. No siempre puedes usar la tienda de aplicaciones, así que esta es la mejor opción.
Shumii
11
Por favor deje de hacer esto. Las personas con discapacidad visual no pueden ver sitios web sin hacer zoom sobre ellos y esto hace que nuestras vidas sean mucho más difíciles.
Jack Marchetti
32
¿Te imaginas crear una aplicación de estilo "Google Maps" y la primera vez que pellizcas para acercar, ya no puedes ver el CUADRO DE ENTRADA DE TEXTO? ¿O los SÍMBOLOS DE COPYRIGHT? A veces, no desea que TODA la APLICACIÓN haga zoom. A veces, solo desea que PARTE DE ÉL se amplíe.
Ayelis
8
Si está diseñando una aplicación web de una sola página con capacidad de respuesta, el zoom de pellizco (también zoom automático) realmente perturba el flujo de trabajo, porque el navegador se acerca automáticamente si accidentalmente hace doble clic en un espacio vacío.
Tower Jimmy

Respuestas:

169

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" />
SpaceBeers
fuente
29
he añadido eso. pero aún puedo pellizcar y hacer zoom.
Harsha MV
gracias tuve un valor de puerto predeterminado. por lo que estaba siendo anulado
Harsha MV
1
¿Cuál es la diferencia entre esto y stackoverflow.com/a/4472910/198348 ?
Ehtesh Choudhury
3
@Shurane ¿Son preguntas diferentes?
SpaceBeers
9
2019: Las PWA son una cosa ahora y esta es una solución para evitar que las PWA tengan comportamientos extraños en dispositivos móviles :)
Jessy
14

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/

trias
fuente
1
Esto funcionó en macOS safari y document.body.style.zoom = 0.99; ni siquiera era necesario.
Kevin Baragona
12

Esto es todo lo que necesitaba:

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

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.

Thibaut Rey
fuente
3
Debería hacer esto como un comentario.
Awesomeness01 de
2
Lo siento, mi nivel en ese momento no me permitía publicar comentarios sino solo mensajes nuevos, por eso.
Thibaut Rey
2
Establecer el tamaño de fuente en 16px en elementos de formulario evitará un zoom en dispositivos iOS.
hellojebus
Puedo decir que no tienes 50 años. Para muchos de nosotros, no es que tengamos problemas de visión lo suficientemente graves como para tener que usar adaptaciones especiales (incluso anteojos para leer), EXCEPTO cuando usamos páginas web en nuestros iPads que los diseñadores creen que son perfectas con sus pequeñas fuentes. Estas páginas me dicen: "No me importa si puedes leer esto o no, viejo".
fool4jesus
2
Soy un hombre mayor con problemas de visión y, sin embargo, entiendo totalmente por qué a veces es necesario. Los "sitios web" no siempre están pensados ​​para el público en general o para todos los miembros de la sociedad, de la misma manera que sería una locura obligar a todos los ciudadanos a instalar rampas para sillas de ruedas y sanitarios unisex en sus casas, porque "esa es la ley que conoces ". Seguro que si está proporcionando acceso público o empleando a personas, esas consideraciones entran en juego en la arquitectura. Hay, por ejemplo, juegos de aplicaciones web de una sola página que se arruinarían al permitir que las personas acerquen y alejen.
no sincronizado
3

Encontrado aquí puede usar user-scalable=no:

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

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.

Señor increíble
fuente
Esto también desactivará el desplazamiento
simonwjackson
0

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.

Ajay Sharma
fuente
0

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');
  }
Pascal Casadei Van Raamsdonk
fuente