科尔多瓦/Phonegap 3.4.0 iOS 7.1 - 键盘/网页视图问题

Cordova/Phonegap 3.4.0 iOS 7.1 - Keyboard / Web View issue

本文关键字：键盘 iOS 视图 网页 问题 Phonegap      更新时间：2023-09-26

我已经为这个问题苦苦挣扎了一个多星期了，非常感谢我能得到的任何帮助。我会按照我的理解解释这个问题，但如果我说任何不正确的话，请纠正。

在 iOS 7.0.x 中，当显示键盘时，Web 视图会调整大小，以便键盘占用的区域不被视为视口窗口大小的一部分。在 7.0 之前，Cordova 键盘插件处理此 Web 视图大小调整。由于 7.0 以所需的方式本机处理键盘显示，因此config.xml文件的键盘shrinkView选项在提交时变为"无操作"：

https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a

但是，在 7.1 中，键盘占用的区域出现在 Web 视图上。这有一个痛苦的副作用。假设<div>您想在正文前面加上文本区域（如发表评论或聊天回复），即;

<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 不会固定在底部，从而破坏布局。

我尝试了以下方法：

  • 使用CSS进行身体和固定div.位置固定/绝对似乎没有区别。为身体设置显式高度没有任何作用。

  • 元视口选项的所有可能组合。这是我目前正在使用的：

<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 键盘插件中的"无操作"。这仍然会像在iOS 7.0.x中那样破坏布局。

  • 在input上放置 JS 事件侦听器并focus事件以继续计算底部偏移量以将div 保持在底部。这是非常跳跃的，因为它与将输入字段居中的本机 Web 视图行为作斗争。

  • 更改元标记以在显示/隐藏键盘后设置显式高度。

我正在使用科尔多瓦 3.4.0-0.1.3

还有其他人遇到过这个问题吗？有什么解决方案或想法吗？

对我来说，一个快速的解决方案是在输入失去焦点时强制窗口滚动回原位：

$("input").on('blur',function(){
 //set brief timeout to let window catch up
 setTimout(function(){
   //reposition at top left corner of screen
   window.scrollTo(0,0);
 },20); 
});

希望对您有所帮助！

看起来 Ionic 对此问题有一个多部分解决方案，其中包括根据设备动态更新元视口标签，以及通过挂钩到键盘隐藏/显示事件，然后使用他们的滚动框架将输入滚动到视图中。

更多信息在这里..http://ionicframework.com/blog/ionic-keyboard/

这需要你使用他们的框架，所以我正在把它移植到JQuery和IScroll，我会让你了解我的最新进展。

我还在phonegap论坛上发布了我对phonegap键盘的经验，但还没有太多回应。https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c

我遇到了一些类似的问题。我有一个cordova 3.3.0应用程序与Sencha Touch结合使用。

在iOS 7.0之前，我面临的问题是，当键盘出现时，标题栏超出了屏幕顶部。键盘只是用来向上推整个视口。经过大量的搜索和努力工作，我能够通过使用文本字段的焦点和模糊事件实现计数器动画在键盘上升时向下移动标题栏来部分解决问题。

iOS 7.0是一个惊喜，因为它原生解决了这个问题。我注释掉了我的修复程序（幸运的是，没有删除），标题栏仍然固定在顶部，没有任何额外的努力。

似乎iOS 7.1已经恢复了该修复程序（想知道为什么？？当我更新到iOS 7.1时，标题栏问题又回来了，我现在别无选择，只能取消评论笨拙的修复程序。任何人都可以给出一些更好或永久的解决方案来解决这个问题吗？

这能解决你的问题吗？

检查您的 html 元标记中是否有如下所示的内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

将其替换为：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
相关文章：