¿Cómo puedo "deshabilitar" el zoom en una página web móvil?

316

Estoy creando una página web móvil que es básicamente una gran forma con varias entradas de texto.

Sin embargo (al menos en mi teléfono celular Android), cada vez que hago clic en alguna entrada, toda la página se amplía, oscureciendo el resto de la página. ¿Hay algún comando HTML o CSS para deshabilitar este tipo de zoom en las páginas web de moble?

html css mobile Martín Fixman
fuente
3
Como Greg dijo anteriormente, si entro en un sitio web móvil que inhabilita el zoom, lo primero que hago es presionar el botón Atrás (a menos que sea algo que realmente tenga que ver), y estoy seguro de que no soy el único. . Además, hablando desde mi experiencia, la mayoría de los sitios web que tienen el zoom deshabilitado también usan fuentes pequeñas, lo que hace que leer el texto sea difícil y muy incómodo.
tomasz86
8
Estoy de acuerdo en que no debería deshabilitarse para la mayoría de los sitios, pero hay algunos casos de uso en los que es posible que desee deshabilitar el zoom predeterminado, como los juegos web para dispositivos móviles en los que es posible que desee anular el zoom para hacer otra cosa.
Lucas
11
No lo hace : si los usuarios desean hacer zoom, entonces dejen que lo hagan. Además: Chrome tiene una opción para ignorar tu solicitud.
Martin
2
Para los usuarios de Android Firefox, existe el complemento Always Zoom for Firefox . Muy recomendable.
Colin D Bennett
2
Desde iOS 10 , user-scalable=nose ignora. Vea esto
Raptor el

Respuestas:

443

Esto debería ser todo lo que necesitas 

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
kgutteridge
fuente
23
esto también deshabilita la capacidad del usuario para hacer zoom en general, así como la capacidad del navegador para ajustar automáticamente la forma en que la página se ajusta a la ventana gráfica; todo lo que Martin está buscando es una forma de deshabilitar el 'zoom-en-entrada-clic' comportamiento.
Matt Lohkamp
3
En este momento, alguien en Posterous hizo exactamente eso, mientras tenía la fuente a 12px, por lo que es ilegible y no puedo encontrar una forma de evitarlo.
Emil Ivanov
41
Toda persona con discapacidad visual, incluido yo mismo, odia esto más que nada. Tengo que tomar capturas de pantalla de páginas que hacen esto y luego acercarlas en el visor de imágenes.
Jack Marchetti
66
¿Qué hace la segunda metaetiqueta? ¿No está width=device-widthya en la primera metaetiqueta?
Lucas
1
parece que esto no funciona en iOS 7. Ver la respuesta de
lukad03
159

Para aquellos de ustedes que llegan tarde a la fiesta, la respuesta de kgutteridge no funciona para mí y la respuesta de Benny Neugebauer incluye objetivo-densidaddpi (una característica que se está desaprobando ).

Sin embargo, esto funciona para mí: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Luke Keller
fuente
77
Esta es la respuesta correcta ahora. Las otras respuestas ya no funcionan (al menos para iOS 7).
KyleFarris
77
¿Alguien intentó esto en iOS 10.x no creo que esté funcionando?
JMac
No funciona para mi Se redimensionó toda la pantalla con barra de desplazamiento y zoom incorrecto.
Cocorico
1
Todavía no funciona en Safari / iOS 11 debido al problema de SFB en Apple.
15ee8f99-57ff-4f92-890c-b56153
52

Hay una serie de enfoques aquí, y aunque la posición es que, por lo general, los usuarios no deberían estar restringidos cuando se trata de hacer zoom para fines de accesibilidad, puede haber incidentes donde se requiere:

Renderice la página al ancho del dispositivo, no escale:

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

Evite el escalado y evite que el usuario pueda hacer zoom:

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

Eliminar todo el zoom, toda la escala

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
SW4
fuente
"por lo general, los usuarios no deberían estar restringidos", pero al desarrollar aplicaciones web para dispositivos móviles, a menudo hay que lidiar con el "enfoque de entrada zom-in". Encuentro útil deshabilitar el zoom en ese caso.
Le 'nton
@ Le'nton deshabilitar el zoom en toda la página no es una buena manera de lidiar con el zoom en el enfoque de entrada. Al menos en iOS, el zoom de enfoque de entrada se puede desactivar aumentando el tamaño de fuente de la entrada.
pfg
39

Puedes usar:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Pero tenga en cuenta que con Android 4.4 la propiedad target-densidaddpi ya no es compatible . Entonces, para Android 4.4 y versiones posteriores, se sugiere lo siguiente como mejor práctica:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Benny Neugebauer
fuente
35

Como todavía no hay una solución para el problema inicial, aquí está mi CSS puro de dos centavos.

Los navegadores móviles (la mayoría de ellos) requieren que el tamaño de fuente en las entradas sea de 16px. Entonces

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}
Expandir fragmento

resuelve el problema Por lo tanto, no necesita deshabilitar el zoom ni perder las funciones de accesibilidad de su sitio.

Si el tamaño de fuente base no es 16px o no es 16px en móviles, puede usar consultas de medios.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}
Expandir fragmento

Azamat Rasulov
fuente
2
¿Por qué esta solución tiene tan pocos votos? Es, con mucho, la mejor manera de evitar el zoom de clic de formulario.
KlausCPH
1
Si; ¡Esto resolvió mi problema también! No quería deshabilitar el zoom por completo y esto era justo lo que necesitaba.
brendan
1
También puede configurar font-size: 1rempara toda la página, de modo que la fuente se escale bien, evitando simultáneamente el problema de "enfocar al hacer zoom".
itachi
12

intenta agregar esta metaetiqueta y estilo 

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


<style>
body{
        touch-action: manipulation;
    }
</style>
Sarath Ak
fuente
1
no touch-actiondebe establecerse en none: developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values
rahulroy9202
@ rahulroy9202 para mí touch-action: manipulation;funcionó bien. touch-action: none;no hizo nada
Umair
7

Parece que solo agregar metaetiquetas a index.html no evita que la página haga zoom. Agregar el estilo a continuación hará la magia.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

EDITAR: Demo: https://no-mobile-zoom.stackblitz.io

Api
fuente
2
Esto debería ser aceptado, también trabajando en el safari móvil ios13 atm
Magico
Funciona como se esperaba desde el móvil, ¡gracias!
mira
6

Posible solución para aplicaciones web: si bien el zoom ya no se puede deshabilitar en iOS Safari, se deshabilitará al abrir el sitio desde un acceso directo de la pantalla de inicio.

Agregue estas metaetiquetas para declarar su aplicación como "compatible con aplicaciones web":

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

Sin embargo, solo use esta función si su aplicación es autosuficiente, ya que los botones de avance / retroceso y la barra de URL, así como las opciones para compartir, están deshabilitadas. (Sin embargo, todavía puede deslizar hacia la izquierda y hacia la derecha) Sin embargo, este enfoque permite que la aplicación sea bastante parecida a ux. El navegador de pantalla completa solo se inicia cuando el sitio se carga desde la pantalla de inicio. También lo puse a trabajar después de incluir un apple-touch-icon-180x180.png en mi carpeta raíz.

Como beneficio adicional, probablemente también desee incluir una variante de esto:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
denkquer
fuente
1

Puede realizar la tarea simplemente agregando el siguiente elemento 'meta' en su 'cabeza':

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

Agregar todos los atributos como 'ancho', 'escala inicial', 'ancho máximo', 'escala máxima' podría no funcionar. Por lo tanto, solo agregue el elemento anterior.

Kasumi Gunasekara
fuente
-1 
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Agregue la secuencia de comandos para deshabilitar pellizcar, toque, enfoque Zoom

Prem
fuente