Solución:
Lo siguiente funcionó para mí (Android Galaxy S2):
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
¡Imposible!
Tengo malas noticias para todos ustedes. Han pasado 6 meses y nadie ha respondido correctamente a la pregunta.
También he terminado de trabajar en ese proyecto y empleador.
Tengo miedo de decirlo, pero exactamente lo que pedí es imposible. Lo siento pueblos. Pero voy a dejar viva la pregunta para que la gente pueda ver las otras opciones.
Problemas de escala causan zoom en el enfoque de entrada
Existe una gran dificultad para dimensionar el contenido para diferentes resoluciones y tamaños de pantalla, que en última instancia es la causa de este problema de zoom.
La mayoría de los navegadores móviles tienen un disparador en el enfoque de entrada (que no puede anular sin dificultad):
if (zoom-level < 1)
zoom to 1.5
center focused input relative to screen
* sí, eso fue demasiado simplificado.
Mito de las correcciones de escala de metaetiquetas.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Todos esos ajustes de ventana gráfica no evitar el zoom de enfoque de entrada si está alejado. Estos tampoco anularán ningún otro html, cuerpo o tamaño de elemento que empujaría la ventana a un ancho más ancho que la pantalla.
Causa primaria
Usar una ventana o un tamaño de cuerpo más grande que las dimensiones de la pantalla del dispositivo.
Considere el tamaño de pantalla estándar de la mayoría de los teléfonos inteligentes Android de la línea Galaxy: 360 x 650. Si el cuerpo del documento, o la ventana, se define como más grande que eso (digamos 1024 de ancho para que sea obvio), algunas cosas pueden ocurrir:
- El navegador puede alejarse automáticamente para ajustar el ancho a la pantalla.
- El usuario puede hacer lo anterior.
- Es posible que haya hecho lo anterior.
- El navegador restaurará el nivel de zoom en visitas posteriores a la página.
- Ahora está viendo el contenido con un zoom de ~ 0.35x.
Estado inicial 1x
Cuando se carga, la página no cabe. Algunos navegadores pueden alejarse para ajustarse a la ventana, pero el usuario seguramente lo hará. Además, si redujo el zoom en esta página una vez, el navegador almacenará el nivel de zoom.
Alejar para ajustar 0.35x
Una vez alejado, el ancho se ajustará bien, y una página con más área vertical llenará la pantalla bastante bien … pero …
Tenga en cuenta que el navegador se encuentra ahora en un estado en el que el texto y la entrada (tamaño para el zoom 1x normal) serían demasiado pequeños para leer, por lo que desencadena un comportamiento de usabilidad de hacer zoom en los campos de entrada cuando se enfocan.
Zoom en el foco de entrada 1.5x
El comportamiento típico en el caso anterior es hacer zoom a 1.5x, para asegurar la visibilidad de la entrada. El resultado (si ha diseñado todo para que se vea mejor cuando se reduce el zoom o para la pantalla más grande) es menos que deseable.
Solucion 1
Utilice una combinación de reglas de medios CSS, detección de dispositivos o lo que mejor se adapte a su situación. Configure la ventana y el cuerpo a un tamaño que llene el espacio de la pantalla, sin excederlo.
- Esta es la razón por la que tanta gente tiene éxito al forzar el tamaño del texto de entrada a 16px;
- una vez que hagas eso, está claro que estás MUY alejado.
- también tiene el beneficio adicional de engañar al navegador para que permita que las ventanas ligeramente alejadas no activen el enfoque-zoom.
Solucion 2
Utilice la ventana gráfica meta, pero luego tenga cuidado con los anchos de CSS.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- Al utilizar este método, debe realizar una de las siguientes acciones:
- Utilice solo porcentajes para los anchos.
- Defina un ancho de em y solo use em y% para anchos.
- vea la Solución 1 para usar anchos de px.
Solución 3
jQuery.mobile $.mobile.zoom.disable();
Solo asegúrese de comenzar a desarrollar con él desde el principio, y no desde el medio.