La vista se desplazó horizontalmente cuando se enfoca el campo de text.

Este es el problema que estoy teniendo cuando el campo de text está enfocado en mi aplicación Sencha Touch

introduzca la descripción de la imagen aquí

El campo de text parece estar centrado vertical y horizontalmente por alguna razón.

Así es como se supone que debe verse

introduzca la descripción de la imagen aquí

¿Alguien ya tiene el mismo problema y lo resuelve?

Actualizar

No sucede todo el time, pero sucede en cualquier campo de text que no esté originalmente centrado horizontalmente.

A veces sucede también en Android (Chrome 26)

Creo que lo que estás viendo es (al less desde las capturas de pantalla) la característica de auto-zoom Safari de iOS en los cuadros de input. Este " fenómeno " centra / enfoca automáticamente un cuadro de input cuando gana foco de input.

Esta label <meta /> ayuda a evitar que:

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

Lo que logra esta label <meta /> arriba es:

  • Representación de la página en el ancho de la pantalla del dispositivo;
  • Establecer el nivel de zoom en 1:1 ;
  • Y la fijación de la escala máxima para ser 1 (esencialmente no escalable ).

Si su página está definitivamente optimizada para dispositivos mobilees, entonces la solución anterior debería funcionar bien.


Alternativamente, en caso de que quiera tener control sobre qué control <input /> ocurre, use:

 <meta name="viewport" content="width=device-width" /> 

y luego, establezca el estilo de font-size cada <input /> en al less 16 píxeles.

 <input type="text" style="font-size: 16px;" /> 

Esta label <meta /> más compacta simplemente dice que la página debe presentarse inicialmente en una escala 1:1 .


Aquí hay una página de testing (acortada: http://bit.ly/15GbxJa ) que demostrará lo que (con suerte) desea corregir. Esta página de testing está utilizando el segundo método (alternativo) para un control de grano más fino; Puedes echar un vistazo al código fuente como reference.

Visualización de la página inicial:

Visualización de la página inicial

Con y sin auto zoom, respectivamente:

Zoom automático habilitado Zoom automático deshabilitado

En realidad, era el Facebook <div> que necesitas tener en tu index.html, que durante las requestes de la aplicación estaba causando este problema. Como dijo @rdougan, era más grande que la pantalla y, por lo tanto, el campo estaba centrado horizontal y verticalmente.

Para resolver este problema, simplemente oculto el Facebook <div> después de que la request de la aplicación se haya enviado y mostrarla cuando la necesite.

Intente configurar min-width en el elemento principal