当ios 7虚拟键盘存在时，Div元素不会停留在底部 [英] Div element won't stay at the bottom when ios 7 virtual keyboard is present

问题描述

当我按下一个文本框后出现ios 7虚拟键盘时，我遇到了一个将div元素粘贴到我的网络应用程序底部的问题。

ve this div元素：

  .... 
< div id =footerstyle = align：center> 
< div id =idName>< img alt =SomeNamesrc =images / logo.png/>< / div> 
< / div> 
 
< / form> 
< / body> 
  
 
 
 
 
 
 
 
 p> 
 
 
  #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; / *旧浏览器* / 
背景：-webkit-gradient（线性，0 0，0 100％，颜色停止（0，＃999），颜色停止（0.02，＃666） 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之前的版本上运行时，它会工作。
 
 
 
在左侧是在按文本框之前，右侧是在
 
 
 
  
 
 
 
页脚跳到虚拟键盘上方。
 
 
 
  UPDATE： 
 
 
 
我更改了Opossum提供的元标记，现在页脚停留在底部：
 < meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
<！ - < meta name =viewportcontent =initial-scale = 1.0，user-scalable = 0> 
< meta name =viewportcontent =width = device-width，height = device-height，initial-scale = 1.0，maximum-scale = 1.0，target-densityDpi = device-dpi/> 
< meta name =apple-mobile-web-app-capablecontent =yes/> 
< meta name =apple-mobile-web-app-status-bar-stylecontent =black/> 
   
 扩展 
 
 
 
解决方案：解决方案：解决方案：解决方案：解决方案：移除最大尺度和目标密度Dpi，现在它适用于IOS和Android。元标记现在如下所示：
 < meta name =viewportcontent =initial-scale = 1.0，user -scalable = 0，width = device-width，height = device-height/> 
  
 
 
解决方案
 我找到了另一个可能的解决方案。检查您的html元标记是否有这样的内容：
 < meta name =viewportcontent =width = device-width ，initial-scale = 1.0，maximum-scale = 1.0，minimum-scale = 1.0，user-scalable = 0 
  
将其替换为：
 < meta name =viewportcontent =width = device-width，height = device-height，initial-scale = 1.0，maximum-scale = 1.0，target-densityDpi = device-dpi /> 
  
这解决了我的问题。 
 
 
     p>如果你在config.xml中（可能在resources目录下），你应该看到一行代码：
 偏好名称=KeyboardShrinksViewvalue =false/> 
  
 
 
如果将其设置为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.

                        
这篇关于当ios 7虚拟键盘存在时，Div元素不会停留在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！