way*_*ndo 16 html javascript css ios cordova
我已经在这个问题上苦苦挣扎了一个多星期了,非常感谢我能得到的任何帮助.我会按照我的理解解释这个问题,但如果我说错了,请纠正.
在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
还有其他人遇到过这个问题吗？任何解决方案或想法？
小智 1
我遇到了一些类似的问题。我有一个 cordova 3.3.0 应用程序与 Sencha Touch 结合使用。
在 iOS 7.0 之前我遇到的问题是当键盘出现时标题栏超出了屏幕顶部。键盘只是用来将整个视口向上推。经过大量的搜索和努力，我能够通过使用文本字段的焦点和模糊事件实现计数器动画来在键盘上升时向下移动标题栏来部分解决该问题。
iOS 7.0 带来了一个惊喜，因为它本身解决了这个问题。我注释掉了我的修复（幸运的是，没有删除），并且标题栏保持固定在顶部，无需任何额外的努力。
iOS 7.1 似乎已经恢复了该修复（想知道为什么？）。当我更新到 iOS 7.1 时，标题栏问题又出现了，我现在别无选择，只能取消注释这个笨拙的修复。任何人都可以提供一些更好或永久的解决方案来解决这个问题吗？