12

在 iOS 6 中一切正常。键盘打开并将输入移动到视图中。当键盘关闭时，一切都会回到应有的位置。

在 iOS 7 中，键盘可以正常打开，并且输入仍然在视图中。但是，当键盘关闭时，应用程序的整个下半部分就消失了。我已将问题追溯到打开键盘时窗口的高度发生变化，而关闭时则不会变回来。

在打开键盘之前，根据 $(window).height() 的窗口高度是 568，在它打开之后和关闭之后是 828。文档的高度也会相应地改变。

我试图阻止窗口调整大小：

$(window).resize(function(e) {
   e.preventDefault();
   e.stopPropagation();
   window.resizeTo(320,480);
   return false;
});

我还尝试在键盘关闭后重新设置大小，但没有成功。

我正在使用 phonegap 2.7 并将 KeyboardShrinksView 设置为 true。

4

9 回答 9

7

我也看到了这个。高度改变后，我们的一些绝对定位元素会从屏幕底部消失。

我发现在 ios7 中使用 KeyBoardShrinksView = false，window.height 保持不变。不过，这与 ios6 正好相反，所以有点 22 号陷阱。

不确定在 Phonegap 中是否有更好的方法来处理这个问题，但我把它放在 CDVViewController.m 中，为 ios < v7 和 ios > v6 创建到 config.xml 文件，我的应用程序按我想要的方式工作。看起来有点 hacky，但不会对我的其余代码造成太大的破坏。

// read from config.xml in the app bundle
NSString* path = [[NSBundle mainBundle] pathForResource:@"config" ofType:@"xml"];

if (IsAtLeastiOSVersion(@"7.0")) {
    path = [[NSBundle mainBundle] pathForResource:@"config_ios7" ofType:@"xml"];
}

（我还在https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ApplicationPreferences尝试了一个应用程序偏好插件，但不要认为这是为这种偏好而设计的。）

于 2013-10-04T18:52:02.487 回答
5

在我使用cordova 3.1将我的项目升级到iOS后，我开始在没有上面列出的代码的输入字段中遇到类似的问题。键盘把东西向上推，页眉和页脚没有回到原来的位置。我已经测试并解决了这个问题（可能不是很优雅，但它是一种解决方法）。我只是将该代码放在我的 pageinit 事件中。

 /************************************************************************************************* 
 * FIX: to avoid the buggy header and footer to jump and stick not
 * to the top/bottom of the page after an input or textfield lost focus and the keyboard dissapear                          *
 *************************************************************************************************/ 
 $('input, textarea')
 .on('focus', function (e) {
    $('header, footer').css('position', 'absolute');
 })
 .on('blur', function (e) {
    $('header, footer').css('position', 'fixed');
    //force page redraw to fix incorrectly positioned fixed elements
    setTimeout( function() {
        window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() );
    }, 20 );
 });
于 2013-11-14T18:31:51.740 回答
3

将代码添加到 CDVViewController.m 例如它添加到 webViewDidFinishLoad 函数中

CGRect newFrame = self.webView.bounds;
NSLog(@"%f" , newFrame.size.height);

NSString *JS =  [NSString stringWithFormat:@"viewport = document.querySelector('meta[name=viewport]'); viewport.setAttribute('content', 'user-scalable=no, initial-scale=1.0, maximum-scale=0.5, minimum-scale=0.5, width=device-width, height=%d,  target-densitydpi=device-dpi');",  (int) newFrame.size.height*2 ];

[self.webView stringByEvaluatingJavaScriptFromString:JS];

此代码更改<meta name="viewport" content="...">并设置设备的高度

于 2013-10-22T12:42:19.263 回答
2

将您的视口元标记设置为您的 html

<meta name="viewport" content="width=device-width,height=**yourheight**, initial-scale=1, maximum-scale=1, user-scalable=0" >

或者

<meta name="viewport" content="width=device-width,height=**device-height**, initial-scale=1, maximum-scale=1, user-scalable=0" >
于 2013-10-09T09:57:59.747 回答
2

经过数小时的调查，我设法让它工作：

我的 div 被向上推，再也不会被放下，具有 css 属性

position:fixed;

我把这个切换到

position:absolute;

一切正常！

于 2014-09-07T15:22:52.097 回答
2

Petrash 的解决方案对我有用。但我仍然在 iPad 上支持旋转时遇到问题。所以，在同一个 CDVViewController.m 中，我添加了这个方法：

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [super didRotateFromInterfaceOrientation:fromInterfaceOrientation];
    if (self.webView){
        CGRect newFrame = self.webView.bounds;
        //NSLog(@"%f" , newFrame.size.height);

        NSString *JS =  [NSString stringWithFormat:@"viewport = document.querySelector('meta[name=viewport]'); viewport.setAttribute('content', 'user-scalable=no, initial-scale=1.0, maximum-scale=1, minimum-scale=1, width=device-width, height=%d,  target-densitydpi=device-dpi');",  (int) newFrame.size.height*1 ];

        [self.webView stringByEvaluatingJavaScriptFromString:JS];
    }

}

并且，为了支持“非规模”行为，以这种方式编辑了 Petrash 的解决方案：

CGRect newFrame = self.webView.bounds;
    //NSLog(@"%f" , newFrame.size.height);

    NSString *JS =  [NSString stringWithFormat:@"viewport = document.querySelector('meta[name=viewport]'); viewport.setAttribute('content', 'user-scalable=no, initial-scale=1.0, maximum-scale=1, minimum-scale=1, width=device-width, height=%d,  target-densitydpi=device-dpi');",  (int) newFrame.size.height*1 ];

    [self.webView stringByEvaluatingJavaScriptFromString:JS];

键盘收缩视图 = 假

这是 hacky，但它适用于 5.1 到 7.0.3。在 Cordova 3.0 上测试。

于 2013-11-11T11:36:54.083 回答
1

我发现最好的方法是将所有内容放入 div 并通过 javascript 修复其高度。适用于 iOS（5、6、7）和 Android（4.2，...）的现代版本。

<style>
    body {
        overflow-y: scroll;
        overflow-x: hidden;
        webkit-overflow-scrolling: touch;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    body > .viewport{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
</style>

<body>
    <div class='viewport'>
        <!-- Put everything here -->
    </div>
</body>

<script type="text/javascript">
    $("body > .viewport").height($(document).height());
    // WARNING: if your app works in both landscape and portrait modus, then you should reset the height of the container when the app changes orientation
</script>
于 2014-01-06T13:06:53.633 回答
0

我有一个类似的问题让我发疯了好几天。不确定这是否对其他人有帮助，但这就是为我解决的问题：（注意我正在使用 jquery 手指库来监听点击事件）：

$('body').delegate("#send_feedback_button","tap", function(event){
  $('textarea').blur();
  event.stopImmediatePropagation();
  // do my stuff 
});

对我来说，在视图中的任何文本区域上调用模糊是诀窍。stopImmediatePropagation 摆脱了其他一些时髦。

于 2013-11-08T18:57:25.493 回答
0

我遇到了同样的问题，我设法将其追踪到动态内容。我最初有一个使用 javascript 填充文本的空 div。当我用静态文本预先填充 div 时，问题就消失了。

调整大小时似乎未计算此 div 的高度。

于 2014-03-10T10:24:00.020 回答