div元素不会停留在底部时，IOS 7虚拟键盘是present [英] Div element won't stay at the bottom when ios 7 virtual keyboard is present
问题描述
我有一个div元素一个问题，坚持我的web应用程序的底部时，IOS 7虚拟键盘$ P $之后出现pssing一个文本框。
我有这个div元素：
....
＆LT; DIV ID =页脚的风格=文本对齐：中心＆GT;
＆LT; DIV ID =idName＆GT;＆LT; IMG ALT =SomeNameSRC =图像/ logo.png/＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; /表及GT;
＆LT; /身体GT;
它使用这种风格
#footer {
颜色：#CCC;
高度：48像素;位置：固定;
的z-index：5;
底部：0像素;
宽度：100％;
填充左：2px的;
填充右：2px的;
填充：0;边境顶：1px的固体＃444;背景：＃222; / *旧的浏览器* /
背景：-webkit-梯度（线性，0 0 0 100％，色彩停止（0，＃999），颜色停止（0.02，＃666），颜色停止（1，＃222））;
背景：-moz线性梯度（顶，＃999，＃666的2％，＃222）; / * FF3.6 + * /
背景：-webkit线性梯度（顶，＃999，＃666的2％，＃222）; / * Chrome10 +，Safari5.1 + * /
背景：-o-线性梯度（顶，＃999，＃666的2％，＃222）; / *歌剧11.10+ * /
背景：-ms线性梯度（顶，＃999，＃666的2％，＃222）; / * IE10 + * /
背景：线性梯度（顶，＃999，＃666的2％，＃222）; / * * W3C /
}
当我美元的文本框，虚拟键盘上方elementer跳起来页脚p $ PSS。
它使用时，我的iDevices被IOS 7之前的版本上运行的工作。
在左侧是pressing文本框之前和右侧是pressing文本框之后
页脚跳虚拟键盘上方。
更新：
我已经改变了由负鼠提供的meta标签，现在页脚保持在底部：
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;！ - ＆LT; META NAME =视口CONTENT =初始规模= 1.0，用户可扩展= 0＆GT; - ＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备的宽度，高度=设备的高度，初始规模= 1.0，最大规模= 1.0，目标densityDpi =设备DPI/＆GT;
＆LT; META NAME =苹果移动网络应用能力的内容=YES/＆GT;
＆LT; META NAME =苹果的移动web应用程序状态栏式CONTENT =黑/＆GT;
扩展
这是不是问题的一部分，但固定螺丝东西上运行Android的时候:)
对于任何解决方案？
解决方案：去掉最大规模和目标densityDpi，现在，它同时适用于iOS和Android。 meta标签，现在看起来是这样的：
＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展= 0，宽=设备的宽度，高度=设备高度/＆GT;
修改：好吧，我发现了另一个可能的解决方案。检查你的HTML meta标签的是这样的：
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0，最大规模= 1.0，最小规模= 1.0，用户可扩展= 0＆GT;
这个替换它：
＆LT; META NAME =视口CONTENT =WIDTH =设备的宽度，高度=设备的高度，初始规模= 1.0，最大规模= 1.0，目标densityDpi =设备DPI/＆GT;
这解决了这个问题对我来说。我要指出，我的应用程序使用，虽然科尔多瓦。
另一种可能的解决方案
如果您在config.xml中查找（可能是资源目录下，你会看到这样一行：
＆LT; preference NAME =KeyboardShrinksViewVALUE =FALSE/＆GT;
如果您设置为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.
这篇关于div元素不会停留在底部时，IOS 7虚拟键盘是present的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
