[英]iOS 7.1 input field positioned below virtual keyboard forces zoom on focus
我正在使用Cordova编写聊天应用程序,聊天视图在页面底部有一个类似iMessage的输入字段。 在iOS 7.0中,单击该字段会调整窗口大小并将输入字段放在键盘上方。 在iOS 7.1中,单击输入字段只是从底部向上推动所有内容,并且不会调整窗口大小。
我的视口设置为:
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" />
将输入相对于顶部定位时,不会发生调整大小。 但是,将输入定位得足够低以与键盘顶部对齐会导致无调整大小错误。 这可以通过构建离子磨砂玻璃演示和更改页脚来复制
<footer class="bar bar-footer bar-frosted"><button class="button button-clear button-positive" ng-click="add()">Add Message</button></footer>
至
<footer class="bar bar-footer bar-frosted"><input name="testInput"></footer>
在www / index.html中
这会复制iOS7.1中的错误,并在iOS 7.0.x中按预期工作。 我已经按照这里的建议,但他们的线程已过时,并没有最终工作。 提前感谢您的任何见解!
你有没有尝试明确设置宽度? 像这里提到的?
<meta name="viewport" content="width=device-width">
编辑: Ionic已将其修复为测试版4,因此这些hacky修复程序不应该是必要的:)最重要的是Ionic团队认识到问题并修复它!
我现在要做的是类似于上面的 @ajsnaps答案。 我不认为这是一个很好的解决方案,因为它有bug(类似于另一个线程中指出的那些)。
当我想出来的时候,我会尝试用更好的东西来更新它,如果有人提出更好的解决方案,我会保持开放状态。
$("input").on('focus',function(){
//set brief timeout to let window catch up
setTimeout(function(){
//pull down the message area (scrollPane) and header (titleBar)
//works on both 3.5" and 4" screens
$("titleBar").css('top', '215px');
$("scrollPane").css('top', '273px');
},20);
});
$("input").on('blur',function(){
//set brief timeout to let window catch up
setTimeout(function(){
//push the top back up
$("titleBar").css('top', '0px');
$("scrollPane").css('top', '56px');
},20);
});
此外,我确保在从聊天视图导航回来后重置标头。
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.