8

我刚刚从 cordova 3.0 升级到 3.1，我仍然遇到一个非常令人不安的问题（在使用 KeyboardShrinksView 首选项时仍然存在）。

每当我关注触发键盘打开的元素（输入/文本区域）时，该元素都会隐藏在键盘后面，我需要向下滚动（顺便使用 webkit-overflow-scrolling 进行滚动）才能看到元素及其内容。

当 KeyboardShrinksView 设置为 true 时，页面甚至不会滚动，更糟糕的是。

有什么解决方案可以解决这个问题吗？我看过一些问题和错误报告，但没有有效的解决方案（或根本没有解决方案）。

玩“全屏”偏好并不能解决问题。

4

5 回答 5

5

刚刚遇到了与此非常相似的问题。在这个网站上发现的一些 hack 确实有效，但有令人讨厌的副作用（例如使滚动或 CSS 布局混乱）。终于想出了一个全新的愚蠢的黑客。

视口元标记：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />

JavaScript 在加载后运行：

document.body.style.height = screen.availHeight + 'px';

就是这样。适用于 iOS 7，我不知道为什么。

于 2014-01-23T18:18:26.263 回答
3

最后在以下插件的帮助下解决了这个问题：jQuery scrollTo plugin

每当我关注一个元素时，我都会触发一个焦点事件，该事件会执行以下计算并更新滚动位置：

updateScroll: function(e){
    var el = $(e.currentTarget);
    var offset = -$(".scrollerWrap").height() + $(el).height();
    $(".scrollerWrap").scrollTo(el,{offset: offset});
}

将输入/文本区域的底部粘贴到键盘的顶部。工作起来就像一个魅力，即使解决方案需要通过那一点 JavaScript。

于 2013-10-08T12:36:53.443 回答
2

好吧，从逻辑上讲，当键盘打开时视图应该向上移动。我在 iOS7 上遇到过类似的问题，为了解决这个问题，我应用了一些 CSS 调整。

对包含应用程序内容的包装类/ID 进行了调整。

position: relative;
overflow: hidden;
height: 460px;
width: 320px;

注意 - 高度和宽度根据设备高度和宽度动态判断

height = window.innerHeight
width = window.innerWidth

通过使用 jQuery 选择器，高度和宽度被附加到包装类/id。

于 2013-10-08T05:31:19.097 回答
0

为我工作。

document.body.style.height = (screen.availHeight - 100) + 'px';
于 2015-06-23T23:44:07.143 回答
0

我认为这里的问题源于Framework7。

document.body.style.height = window.outerHeight + 'px';

上面放置在我的 index.js 文件中的代码就像魅力一样。

于 2017-12-24T17:28:38.917 回答