当我按下文本框时，页脚元素会跳到虚拟键盘上方.当我的 iDevices 在 ios 7 之前的版本上运行时，它曾经可以工作.
左侧是按下文本框之前，右侧是按下文本框之后.
页脚跳到虚拟键盘上方.
将其替换为:
<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(可能在资源目录下，您应该看到一行内容:
如果您将其设置为 true，它会阻止页脚在软键盘上方移动.但是，这也会导致键盘有时会覆盖用户正在输入的文本字段.
I'm having a problem with a div element to stick to the bottom of my web app when ios 7 virtual keyboard appears after pressing a textbox.
I've this div element:
....
<div id="footer" style="text-align:center">
<div id="idName"><img alt="SomeName" src="images/logo.png" /></div>
</div>
</form>
</body>
It uses this style
#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 */
}
And when I press on the textbox, the footer elementer jumps up above the virtual keyboard.
It used to work when my iDevices was running on versions before ios 7.
On the left side is before pressing the textbox and on the right side is after pressing the textbox.
The footer jumps above the virtual keyboard.
UPDATE:
I've changed the meta tag provided by Opossum and now the footer stays at the bottom:
<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" />
Extension
This is not a part of the question, but the fix screws things up when running on a Android :)
Any solution for that?
Solution: removed maximum-scale and target-densityDpi and now it works for both IOS and Android. The meta tag now looks like this:
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
解决方案
EDIT: Okay, I found another possible solution. Check your html meta tags for something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Replace it with this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
This fixed the problem for me. I should note that my app is using Cordova though.
Another possible solution:
If you look in config.xml (probably under the resources directory, you should see a line that says:
<preference name="KeyboardShrinksView" value="false" />
If you set that to true, it keeps footers from moving above the soft keyboard. However, this also causes the keyboard to sometimes cover up the text field that the user is typing in.
留_东临天下
