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

393

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!

MetaGuru
fuente
66
Si está haciendo un juego, entonces posiblemente sea válido controlar el zoom. Sin embargo, en casi todos los demás casos, se debe desalentar fuertemente. Desafortunadamente, se ha convertido en una práctica estándar para muchos desarrolladores móviles. Si un usuario quiere hacer zoom para poder leer el texto con mayor facilidad, etc., evitarlo no es muy bueno.
user2268788
72
Estamos desactivando el zoom en una aplicación web móvil. No puede ampliar las aplicaciones nativas de iOS y no es obligatorio en nuestra aplicación web. Si su sitio o aplicación está optimizada para dispositivos móviles, sus usuarios no necesitarán hacer zoom. Siempre hay casos de uso para deshabilitar el zoom. No tiene que ser siempre de una manera u otra.
Bradley Flood
10
Sí, no estoy siguiendo la línea de la lógica de que deshabilitar el zoom en un sitio optimizado para dispositivos móviles es algo malo . Lo que es mucho peor es hacer que la ventana de visualización se desplace accidentalmente porque la pantalla capta la entrada de desplazamiento y zoom accidental en un sitio que no requiere que haga zoom de todos modos. Siendo realistas si sus usuarios necesitan ampliar el contenido de su sitio optimizado para dispositivos móviles, entonces el problema es el diseño, no la falta de zoom.
Nathan Hornby
3
@NathanHornby: El problema de deshabilitar el zoom es la falta de respeto de las preferencias del usuario. Diferentes usuarios prefieren diferentes tamaños de texto, el público más joven con buena vista podría preferir ver más contenido, mientras que el público con poca vista no puede usar nada que no tenga texto gigante. Otras personas tienen Parkinson pero todavía tienen buena vista, por lo que prefieren botones extra grandes pero no se benefician del texto grande en general.
Lie Ryan
44
@NathanHornby No significa que el diseñador haya hecho algo mal necesariamente. Simplemente significa que el usuario, por cualquier motivo, desea hacer un acercamiento. Pinch-zoom es una característica estándar de todos los teléfonos con pantalla táctil. Cualquier usuario que posea dicho teléfono, sabe cómo usarlo. Sé que es una vieja pregunta, pero todavía estoy constantemente frustrado por los desarrolladores que insisten en romper la funcionalidad de mi teléfono porque creen que hace que sus diseños se vean mejor.
user1751825

Respuestas:

719

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" />
BoltClock
fuente
12
fueron las citas elegantes, había copiado la etiqueta de un sitio web sin darme cuenta, ¡gracias por señalarlo!
MetaGuru
55
Quizás esto esté en la cola larga aquí, pero podría valer la pena señalar que esto debe aplicarse en la página de "nivel superior". Si tiene esta metaetiqueta aplicada a un iframe, no funcionará a menos que la metaetiqueta también se aplique a la página superior.
founddrama
2
Por qué alguien alguna vez crearía una pieza de software que crea citas elegantes está fuera de mi alcance.
Traubenfuchs
3
@Traubenfuchs: tipografía.
BoltClock
3
Esta es una respuesta bastante antigua y en relación con el problema que había leído, que si establece la escalabilidad del usuario en no, esto causaría problemas de accesibilidad. A partir de iOS 10 funciona bien, lo que permite al usuario hacer zoom si lo desea, pero sin hacer zoom en el cuadro de entrada de lo contrario. Tampoco es necesario establecer tamaños de fuente grandes.
David
161

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
fuente
66
Qué terrible decisión de Apple. El uso de una rueda giratoria con los botones "-" y "+" para disminuir / incrementar un número ahora amplía y aleja repetidamente la página en iOS Safari. Las prensas se interpretan como doble toque para hacer zoom, sin forma de desactivarlo. iOS Chrome funciona perfectamente. Frustrante.
Paul
55
Aunque estoy jodido de esa decisión, estoy realmente contento con Apple como usuario, ya que quería forzar esta función en muchos sitios web que usaban elementos pequeños en su interior.
Bishoy Hanna
10
el mundo se va al infierno
hombrecito
2
Oh, Dios, ¿quién lo hubiera adivinado? Otra elección ridícula hecha por Apple
Emil Pedersen
3
Déjelo en manos de Apple para forzar una "característica" de accesibilidad en todos en lugar de simplemente agregar una opción en la configuración de Accesibilidad ...
Lennholm
99

@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();
});
jeremypress
fuente
8
En iOS 10, descubrí que esto funcionaba, pero si desplaza la página y luego pellizca el zoom mientras sigue desplazándose, permite el zoom. Luego te encuentras atascado en el nuevo nivel de zoom hasta que vuelvas a desplazarte. Por lo tanto, esto no parece una buena solución a menos que el cuerpo de la página no se pueda desplazar. :(
Rand Scullard
1
Una advertencia: el usuario aún puede tocar dos veces la pantalla que hará / puede hacer zoom y esto no lo atrapa.
Stephen
1
Todavía a veces permite hacer zoom tocando dos veces la pantalla. :(
Jarzka
44
¿A qué equivale el "doble toque" gesturestart? dblclick ?
lowtechsun
3
Otra nota, si desea deshabilitar el aspecto de doble toque del zoom. Mobile Safari también admite 'acción táctil: manipulación' (se incluye en 'soporte básico', que desactiva los eventos de doble toque. Documentación aquí: developer.mozilla.org/en-US/docs/Web/CSS/touch-action
jeremypress
15

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);
Arthur Tsidkilov
fuente
3
Debería serevent.scale !== 1
aleclarson
@aleclarson event.scale> 1 include condition event.scale! == 1
Arthur Tsidkilov
@aleclarson para evitar el zoom en Mobile Safari es suficiente, escribí que no me gusta de esta manera, normalmente porque tiene que usarse viewport, pero en IOS iphone 6 y superior no funciona (creo que su evento. ! == 1 debería ser más correcto, pero todo esto no es correcto, es una especie de piratería)
Arthur Tsidkilov
@aleclarson Parece que usar! == rompe el navegador nativo en Android 4.4; event.scale no está definido.
James Pizzurro
3
@JamesPizzurro Sí, puede utilizarevent.scale !== undefined && event.scale !== 1
aleclarson
11
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.

kiwi enojado
fuente
Qué fastidio ... ¿Alguna idea de por qué eliminaron esto?
Stephen Tetreault
3
@ smt no quieren que la experiencia web compita con la experiencia de la aplicación en la tienda de aplicaciones.
Marvin Danig
2
@marvindanig sí ... ya que requieren una tarifa de 99 $ para producir una aplicación que de otra manera podría convertirse en una aplicación de página web más accesible para todas las plataformas. Además, a Apple no le puede gustar una "experiencia web", si eso significa que los usuarios + desarrolladores pueden evitar el jardín amurallado. Se trata de poder y dinero de Apple :(
humanityANDpeace
En realidad, es posible hacer que esto funcione en las nuevas versiones de iOS. Vea mi respuesta: stackoverflow.com/a/62165035
Feross
7

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
}
Lorenz Lo Sauer
fuente
No funciona en las nuevas versiones de iOS
Feross
7

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.

José Antonio Postigo
fuente
No funciona en mi iOS 12.3.1, aquí está el enlace de prueba: https://output.jsbin.com/liqiraj
Jess
4

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

Nikhil Gowda
fuente
iOS 13 cambia false a {pasivo: falso}
wayofthefuture
4

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;
}

imelgrat
fuente
No funciona en las nuevas versiones de iOS
Feross
3

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" />
Alex Borsody
fuente
No funciona en versiones más recientes de iOS
Feross
2

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">
ursuleacv
fuente
No funciona en versiones más recientes de iOS
Feross
0

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>
Galés
fuente
0

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;
}
Feross
fuente
-3

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

telaraña
fuente
13
Esta no es una respuesta ... y muchos clientes todavía piden bloquear el zoom ... así que no puedo tomar esto como una regla general
99
El zoom de accesibilidad no es responsabilidad de la página (ni de ninguna aplicación). Es responsabilidad del sistema operativo proporcionar una herramienta de zoom accesible. Todos los sistemas operativos de hoy en día proporcionan dicha función, que se aplica como un zoom de pantalla , y no debe interferir con el zoom de la página en sí, porque esto no está destinado a la accesibilidad.
Bruno Finger
44
Siempre hay casos de uso válidos para cosas como esta. Por alguna razón, casi toda la literatura web parece suponer que la web es solo para hacer blogs. Así como hay casos de uso válidos para JavaScript eval(), también existen para deshabilitar el zoom. Lo estoy usando para una aplicación web que se usa en combinación con un escáner Bluetooth, para evitar que la página se amplíe cuando se escanea un código de barras.
user128216
3
Estoy completamente de acuerdo con los objetivos de las recomendaciones de accesibilidad, pero no hay duda de que hay momentos en que el zoom no se desea o no se necesita, o incluso puede romper la experiencia del usuario. Además, ya sabes, clientes.
Chuck Le Butt
2
Yo diría que en una aplicación html / javascript, esas pautas no se aplican. Después de todo, ¿una aplicación nativa le permitiría acercar y alejar?
Jörgen Sigvardsson
-5

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">
Cihan Zengin
fuente