html - example - ¿Cómo puedo "deshabilitar" el zoom en una página web móvil?
responsive html (7)
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 16 px. Asi que
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}
Resuelve el problema. Por lo tanto, no necesita deshabilitar las funciones de zoom y accesibilidad suelta de su sitio.
Si su tamaño de fuente base no es 16px o no 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;
}
}
Estoy creando una página web móvil que es básicamente una forma grande con varias entradas de texto.
Sin embargo (al menos en mi teléfono móvil con Android), cada vez que hago clic en alguna entrada, toda la página se aleja, ocultando 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?
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''
/>
Hay varios enfoques aquí, y aunque la posición es que normalmente los usuarios no deberían estar restringidos cuando se trata de zoom para fines de accesibilidad, puede haber incidencias donde sea necesario:
Renderice la página en el 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">
Eliminando todo zoom, todo escalado
<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" />
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 targetdensitydpi (una característica que está en desuso ).
Sin embargo, esto funciona para mí:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
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, sólo agregue el elemento anterior.
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-densitydpi 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" />
por favor intente agregar esta meta-etiqueta 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>