html - que - viewport definicion

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

Question

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 es un valor diferente que encontré recomendado por la búsqueda de Google o la búsqueda SO, pero ninguno de los valores ''escalable por el usuario = X'' parece funcionar

También intenté la coma delimitando los valores en lugar de punto y coma, sin suerte. Entonces intenté SOLAMENTE tener presente el valor escalable por el usuario, aún sin suerte.

ACTUALIZAR

Conseguí 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, por cierto

Answer 1

@mattis tiene razón en que iOS 10 Safari no le permitirá desactivar la función de pellizcar para ampliar con el atributo escalable por el usuario. Sin embargo, lo tengo para deshabilitar el uso de preventDefault en el evento ''gesturestart''. Solo he verificado esto en Safari en iOS 10.0.2.

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

Answer 2

En Safari 9.0 y versiones posteriores, puede utilizar la metaetiqueta de 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">

Answer 3

Este debería estar trabajando en iPhone, etc.

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

Answer 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

Answer 5

Intenta agregar lo siguiente a tu etiqueta de cabecera:

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

Answer 6

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 a la hoja de estilo CSS

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

Answer 7

Para cumplir con los requisitos de accesibilidad de WAI WCAG 2.0 AA, nunca debe desactivar el zoom de pellizco. (WCAG 2.0: SC 1.4.4 Redimensionar texto Nivel AA). Puede leer más sobre esto aquí: Accesibilidad móvil: Cómo se aplican WCAG 2.0 y otras pautas de W3C / WAI al móvil, 2.2 Zoom / Ampliación

Answer 8

Para las personas que buscan una solución iOS 10, el user-scaleable=no está 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 publicación :

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

Por lo que entiendo, estamos sin suerte.

Answer 9

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

Esto me funciona 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" />

Answer 10

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

.page{width: 960px;}

a

.page{width:93.75%}

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

Answer 11

a veces esas otras directivas en el contenido pueden arruinar su vista con la mejor suposición de Apple sobre cómo diseñar su página, todo lo que necesita para desactivar el zoom de pellizco

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

Answer 12

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

Answer 13

user-scalable=0

Esto ya no funciona en iOS 10. Apple eliminó la característica.

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