我已经在这个问题上苦苦挣扎了一个多星期了,非常感谢我能得到的任何帮助.我会按照我的理解解释这个问题,但如果我说错了,请纠正.
在iOS 7.0.x中,当键盘显示时,Web视图已调整大小,以便键盘所占用的区域不被视为视口窗口大小的一部分.直到7.0,Cordova Keyboard插件处理此Web视图大小调整.由于7.0本地处理键盘以所需的方式显示,因此该提交shrinkView的config.xml文件的Keyboard 选项变为"No-op":
https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a
但是,在7.1中,键盘占用的区域出现在Web视图上.这有一个痛苦的副作用.假设你想在<div>textarea区域前面添加一个(比如留下评论或聊天回复),即;
<body>
<div id="app">...</div>
<div id="reply">
<textarea></textarea>
</div>
</body>
示例CSS:
body {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
#reply {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
无论何时聚焦或输入文本区域,Web视图都将本地重新定位输入字段.由于Web视图仍然考虑了屏幕的整个高度,因此div不会保持固定在底部,从而打破了布局.
我尝试过以下的事情:
与身体和固定div的CSS一起.固定/绝对位置似乎没有什么区别.为身体设置明确的高度不会做任何事情.
元视口选项的所有可能组合.这就是我目前使用的:
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, minimal-ui" />
取消注释cordova键盘插件中的"No-op".这仍然像在iOS 7.0.x中那样打破了布局.
其对JS事件侦听器input和focus事件,以保持计算底部偏移量保持在div底部.这非常激动,因为它与输入字段居中的本机Web视图行为作斗争.
在显示/隐藏键盘后更改元标记以设置显式高度.
我正在使用Cordova 3.4.0-0.1.3
还有其他人遇到过这个问题吗？任何解决方案或想法？