当存在ios 7虚拟键盘时,Div元素不会保持在底部

Question

当按下文本框后出现ios 7虚拟键盘时,我遇到了一个div元素的问题,要坚持我的web应用程序的底部.

我有这个div元素:

....
        <div id="footer" style="text-align:center">
            <div id="idName"><img alt="SomeName" src="images/logo.png" /></div>
        </div>

    </form>
</body>

它使用这种风格

#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 */
}

当我按下文本框时,页脚元素跳到虚拟键盘上方.它曾经在我的iDevices在ios 7之前的版本上运行时工作.

左侧是在按下文本框之前,右侧是在按下文本框之后.

页脚跳到虚拟键盘上方.

更新:

我已经更改了Opossum提供的元标记,现在页脚停留在底部:

<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" />

延期

这不是问题的一部分,但修复程序在Android上运行时搞砸了:)任何解决方案？

解决方案:删除了max-scale和target-densityDpi,现在它适用于IOS和Android.元标记现在看起来像这样:

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

Answer 1

编辑:好的,我找到了另一种可能的解决方案.检查你的html元标记是这样的:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-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" />

这解决了我的问题.我应该注意到我的应用程序正在使用Cordova.

另一种可能的解决方案:

如果你查看config.xml(可能在资源目录下,你应该看到一行说:

<preference name="KeyboardShrinksView" value="false" />

如果将其设置为true,则会阻止页脚在软键盘上方移动.但是,这也会导致键盘有时会掩盖用户正在键入的文本字段.

Answer 2

你#footer班上 的罪魁祸首bottom:0px; 如果你给bottom任何元素,在虚拟键盘的外观上,这些元素在iOS 7中向上移动.解决方法是使用top属性.