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

问题描述

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

我有这个 div 元素:

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

</表单>

它使用这种风格

#footer{颜色:#CCC；高度:48px；位置:固定；z-索引:5；底部:0px;宽度:100%；填充左:2px;填充右:2px;填充:0;边框顶部:1px 实心 #444;背景:#222;/* 旧浏览器 */背景:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));背景:-moz-线性梯度(顶部，#999，#666 2%，#222)；/* FF3.6+ */背景:-webkit-linear-gradient(top, #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 */}

当我按下文本框时，页脚元素会跳到虚拟键盘上方.当我的 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 上运行时修复会搞砸:)有什么解决办法吗?

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

解决方案

EDIT:好的，我找到了另一个可能的解决方案.检查您的 html 元标记是否是这样的:

将其替换为:

<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.

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