¿Cómo deshabilita el zoom de la ventana gráfica en Mobile Safari?

He intentado estos tres en vano:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

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

cada uno son valores diferentes que encontré recomendados por la búsqueda en Google o SO, pero ninguno de los valores ' escalable por el usuario = X ' parece estar funcionando

También intenté delimitar los valores con comas en lugar de punto y coma, sin suerte. Luego intenté SOLO tener el user-scalablevalor presente, todavía no tuve suerte.

ACTUALIZAR

Obtuve esto del sitio de Apple y funciona:

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

Resulta que el problema eran las citas no estándar porque había copiado la metaetiqueta de un sitio web que las estaba usando, ¡vaya!

Su código muestra comillas dobles de atributos como comillas dobles elegantes. Si las citas elegantes están presentes en su código fuente real, supongo que ese es el problema.

Esto funciona para mí en Mobile Safari en iOS 4.2.

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

Para las personas que buscan una solución iOS 10, user-scaleable=noestá deshabilitado en Safari para iOS 10. La razón es que Apple está tratando de mejorar la accesibilidad al permitir que las personas hagan zoom en las páginas web.

De las notas de la versión :

Para mejorar la accesibilidad en los sitios web en Safari, los usuarios ahora pueden pellizcar para hacer zoom incluso cuando un sitio web establece escalable por el usuario = no en la ventana gráfica.

Por lo que yo entiendo, no tenemos suerte.

@mattis es correcto que iOS 10 Safari no le permitirá deshabilitar pellizcar para ampliar con el atributo escalable por el usuario. Sin embargo, lo inhabilité usando preventDefault en el evento 'gesturestart'. Solo he verificado esto en Safari en iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

para iphones safari hasta iOS 10 "viewport" no es una solución, no me gusta de esta manera, pero he usado este código javascript y me ayudó

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

user-scalable=0

Esto ya no funciona en iOS 10. Apple eliminó la función.

No hay forma de que pueda deshabilitar el sitio web de zoom en iOS ahora, a menos que haga una aplicación de plataforma gruesa.

Intente agregar lo siguiente a su etiqueta principal:

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

Adicionalmente

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

Finalmente, ya sea como un atributo de estilo o en su archivo CSS, agregue el siguiente texto para los navegadores basados ​​en webkit:

html {
    -webkit-text-size-adjust: none
}

Lo tengo funcionando en iOS 12 con el siguiente código:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

Con la primera instrucción if, me aseguro de que solo se ejecutará en entornos iOS (si se ejecuta en Android, el desplazamiento se romperá). Además, tenga en cuenta la passiveopción establecida en false.

Esto funciona bien en iOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

gracias @arthur y @aleclarson

Logré detener este comportamiento agregando lo siguiente al encabezado HTML. Esto funciona en dispositivos móviles, ya que los navegadores de escritorio admiten el zoom cuando se usa la rueda del mouse. No es un gran problema en los navegadores de escritorio, pero es importante tener esto en cuenta.

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

y la siguiente regla para la hoja de estilo CSS

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

a veces, esas otras directivas en la contentetiqueta pueden confundir la mejor conjetura / heurística de Apple sobre cómo diseñar su página, todo lo que necesita para deshabilitar el zoom pinch es.

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

En Safari 9.0 y versiones posteriores, puede utilizar la metaetiqueta retráctil en la ventana gráfica como se muestra a continuación

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Tontamente tuve un envoltorio div que tenía un ancho medido en píxeles. Los otros navegadores parecían ser lo suficientemente inteligentes como para lidiar con esto. Una vez que convertí el ancho a un valor porcentual, también funcionó bien en Safari mobile. Muy molesto.

.page{width: 960px;}

a

.page{width:93.75%}

<div id="divPage" class="page">
</div>

Usando el CSS touch-action propiedad es la solución más elegante. Probado en iOS 13.5.

Para deshabilitar los gestos de pellizcar el zoom y tocar dos veces para hacer zoom:

body {
  touch-action: pan-x pan-y;
}

Si su aplicación tampoco necesita desplazarse , es decir, desplazarse, use esto:

body {
  touch-action: none;
}

Para cumplir con los requisitos de accesibilidad WAI WCAG 2.0 AA, nunca debe deshabilitar el zoom de pellizco. (WCAG 2.0: SC 1.4.4 Cambiar el tamaño del texto Nivel AA). Puede leer más sobre esto aquí: Accesibilidad móvil: cómo se aplican WCAG 2.0 y otras pautas W3C / WAI a dispositivos móviles, 2.2 Zoom / Ampliación

Este debería estar funcionando en iPhone, etc.

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