Estoy teniendo un problema con un elemento div que se adhieren a la parte inferior de mi web app cuando ios 7 teclado virtual aparece después de pulsar un cuadro de texto.
Tengo este elemento div:
....
<div id="footer" style="text-align:center">
<div id="idName"><img alt="SomeName" src="images/logo.png" /></div>
</div>
</form>
</body>Utiliza este estilo
#footer{
color:#CCC;
height: 48px;
position:fixed;
z-index:5;
bottom:0px;
width:100%;
padding-left:2px;
padding-right:2px;
padding:0;
border-top:1px solid #444;
background:#222; /* Old browsers */
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background: -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */
background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
background: linear-gradient(top, #999, #666 2%, #222); /* W3C */
}Y cuando presiono en el cuadro de texto, el pie de página elementer salta por encima del teclado virtual.
Se utiliza para trabajar cuando mi iDevices se ejecuta en las versiones anteriores a ios 7.
En el lado izquierdo es antes de pulsar en el cuadro de texto y en el lado derecho es después de pulsar el cuadro de texto.
El pie de página saltos por encima del teclado virtual.
ACTUALIZACIÓN:
He cambiado la etiqueta meta proporcionada por la Zarigüeya y ahora el pie de página se queda en la parte inferior:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0">-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />Extensión
Esto no es una parte de la pregunta, pero la corrección de los tornillos de las cosas cuando se ejecuta en Android 🙂
Alguna solución para eso?
Solución: se quitó el máximo de la escala y el objetivo de densityDpi y ahora funciona tanto para IOS y Android. La etiqueta meta ahora este aspecto:
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>- Hay dos problemas con la configuración de la etiqueta meta a la altura=dispositivo de altura. 1) La barra de estado de las necesidades de 20px. Si usted proporciona 20px desde el webview en la aplicación, usted tendrá una página web que contiene 20px debajo de la pantalla. Significado: que siempre se obtiene un desplazamiento, no importa qué tan poca info que hay en la página. 2) Cuando el teclado está arriba, se puede llegar al elemento fijo por el desplazamiento de la 548px (iPhone 5 y posteriores) a la parte inferior. Esta no era la forma en que solía ser.
EDITAR: Bueno, he encontrado otra solución posible. Compruebe el código html de meta tags para algo como esto:
Reemplazarlo con este:
Esta solucionado el problema para mí. Debo señalar que mi aplicación es el uso de Córdoba, aunque.
Otra posible solución:
Si usted mira en config.xml (probablemente bajo el directorio de recursos, verá una línea que dice:
Si se establece que a la verdad, mantiene los pies se muevan por encima del teclado. Sin embargo, esto también hace que el teclado a veces cubren el campo de texto que el usuario está escribiendo.
No es el culpable de su
#footerclasebottom:0px;Si usted le da
bottoma cualquier elemento, en la apariencia del teclado virtual, los elementos se mueven hacia arriba en iOS 7.La solución es utilizar
toppropiedad.Aprobado respuesta obras, pero se puede jugar con un poco de CSS, así que tengo que usar algo más. No es mi solución, pero lo encontré en el internet y trabajó para mí:
HTML:
JavaScript:
$(document).ready(function () { var ios7 = (device.platform == 'iOS' && parseInt(device.version) >= 7); if (ios7){ $(window).on("resize",function(){ //your iOS fix here }); } });Estoy un poco tarde pero esto funciona así:
Esto supone un fijo o posición absoluta elemento que tiene de fondo: algún número originalmente. Agregue esto a donde sea apropiado en su scripts de javascript (probablemente en una función que se llama cuando se carga la página). Este utiliza jQuery pero fácilmente se traduce en javascript. Básicamente, esto obliga a que el pie permanezca en la parte inferior relacionadas por la parte de arriba del valor en lugar de la inferior valor.
Aquí es cómo hemos resuelto que:
córdoba 2.9.0.
Solución 1. la adición de la ventanilla de la etiqueta meta hizo resolver en cierta medida, pero no totalmente.Por lo tanto caer.
Solución 2.
donde #pie de página es el id del div whihc mantiene de pie de página.
Esto mostrará la barra de herramientas para un flash de un segundo y la piel, para evitar este parpadeo hemos añadido algo de código en el nativo,
1.Registrarse para el keyboardshow evento en su MainViewcontroller.m
agregar lo siguiente en el init functioon:
2.agregue la siguiente función
3.En el archivo js que agregar la función
Háganos saber si esta solución funciona para u.
En mi caso he utilizado
para capturar el evento al entrar en los campos de entrada de texto de los eventos y ocultar la barra inferior
el uso de
y capturar el evento cuando el teclado se cierra y se mostrará de nuevo el teclado usando
Principal problema en el CSS de la clase de propiedad
pie de página{}
Ha establecido la posición «fija» y z-index.
Por favor controlador de posición de la propiedad de acuerdo con el Iphone.