位于虚拟键盘下方的iOS 7.1输入字段强制缩放焦点

Question

我正在使用Cordova编写一个聊天应用程序，并且聊天视图在页面底部有一个类似imessage的输入字段。在ios7.0中，点击字段会调整窗口的大小，并将输入字段置于键盘上方。在iOS 7.1中，点击输入栏只是将所有内容从底部向上推，并且不会调整窗口的大小。

我的视口设置为:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" />

• 当定位输入相对于顶部时，不会发生大小调整。但是，将输入位置定位到足够低以与键盘顶部对齐确实会导致无大小调整错误。这可以通过构建Ionic磨砂玻璃演示并从

  更改页脚来复制。

  <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中的错误，并在ios7.0 .x中正常工作。我遵循了这里的建议，但他们的线程是过时的，并没有结束工作。提前感谢您的任何见解!

Answer 1

您是否尝试过明确设置宽度?就像这里提到的?

<meta name="viewport" content="width=device-width">

Answer 2

编辑:Ionic已经在beta 4中修复了这个问题，所以这些黑客修复不应该是必要的:)感谢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); 
});

另外，我确保在从聊天视图导航回来后头部被重置。

希望这对你有帮助!