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

Posted 2023-03-05

【中文标题】位于虚拟键盘下方的 iOS 7.1 输入字段强制缩放焦点

【英文标题】：iOS 7.1 input field positioned below virtual keyboard forces zoom on focus

【发布时间】：2014-04-17 02:41:24

【问题描述】：

我正在使用 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" />

相对于顶部定位输入时，不会发生调整大小。但是，将输入放置在足够低的位置以与键盘顶部对齐确实会导致无调整大小错误。这可以通过构建Ionic frosted glass demo 并从

更改页脚来复制

<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 中按预期工作。我遵循了here 的建议，但它们的线程已过时并且最终没有工作。提前感谢您的任何见解！

【问题讨论】：

您对 cordova/phone gap "KeyboardShrinksView" 偏好的价值是多少？

真假我都试过了，没区别。

这并不是对我有用的修复方法。我现在正在测试一个解决方案，一旦我确认它有效，就会更新。再次感谢您的意见！

您的解决方案有什么进展吗？

对此***.com/a/23435204/3597396 进行了修改 - 祝你好运！

【参考方案1】：

您是否尝试过明确设置宽度？就像提到的here？

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

【参考方案2】：

编辑：Ionic 已经在 beta 4 中修复了这个问题，所以这些 hacky 修复应该是不必要的 :) Ionic 团队认识到问题并修复它！

我现在要做的类似于@ajsnaps 回答above。我不认为它是一个好的 解决方案，因为它有错误（类似于其他线程中指出的错误）。

当我弄清楚时，我会尝试用更好的东西来更新它，如果有人提出更好的解决方案，我会保持打开状态。

$("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); 

);

此外，我确保在从聊天视图返回后重置标题。

希望这会有所帮助！