在 Trigger.io 中打开 iOS7 软键盘时重新调整视口高度

Question

当在 android 中打开软键盘时，视口会自动调整大小以适应屏幕（设备高度 - 键盘高度）。在 iOS7 中，视口只是被向上推（只是不显示上半部分）。

虽然这可能是某些应用程序想要的行为，但它对我来说效果不佳 - 顶部导航栏被隐藏，我的内容是可滚动的 div - 我希望用户能够一直滚动向上。

在键盘打开/关闭时调整正文手册的大小会导致抖动行为

知道如何解决这个问题吗？

Answer 1

我有完全相同的要求。解决方案是在显示键盘时降低车身高度并修复内容区域的移动。这就是使用 jQuery 时代码的样子：

$(document).on("focus", "input, textarea", function() {
  $(‘html’).addClass("keyboard");

  setTimeout(function() {
    window.scrollTo(0,0);
    document.body.scrollTop = 0;
  }, 0);
});

$(document).on("blur", "input, textarea", function() {
  $(‘html’).removeClass("keyboard");
});

以及对应的CSS：

body {
  position: absolute;
  top: 0;
  bottom: 0;
}

.keyboard body {
  bottom: 240px; /* exemplarily value */
}

需要调整底部值以匹配 iPhone 纵向、iPhone 横向、iPad 纵向和 iPad 横向上的正确键盘高度。

我已经有一段时间没有测试这个代码了，所以也许你可以检查一下它是否适合你而不会有任何闪烁？如果我没记错的话，我在 Mobile Safari 中有轻微的闪烁，但它在本机 WebView 中运行良好。