Question

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

在iOS 7中，键盘打开正常，输入仍然在视图中。当键盘关闭时，应用程序的整个下半部分都消失了。我已经将问题跟踪到键盘打开时窗口高度的变化，并且在关闭时不会改变。

在键盘打开之前，窗口高度为568，根据$（window）.height（），在打开后，它关闭后为828.文档的高度也相应改变。

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

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

我还尝试在键盘关闭后设置尺寸，但没有成功。

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

Answer 1

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

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

不确定在Phonegap中是否有更好的方法来处理它，但我把它放在CDVViewController.m中，为ios＆lt;的config.xml文件创建v7和ios＆gt; v6，我的应用程序以我想要的方式工作。看起来有点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尝试了一个应用偏好插件，但不认为这是为这种偏好而设计的。）

Answer 2

使用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 );
 });

Answer 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="...">并设置高度设备

Answer 4

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];

KeyboardShrinksView = false

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

Answer 5

经过几个小时的调查后，我设法让它发挥作用：

我的div，被推高，再也没有下来，有css属性

position:fixed;

我将其改为

position:absolute;

一切正常！

Answer 6

将您的视口元标记设置为您的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" >

Answer 7

我找到的最好方法是将所有内容放入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>

Answer 8

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

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

对我来说，在视图中任何textarea上调用模糊都是诀窍。 stopImmediatePropagation摆脱了其他一些困难。

Answer 9

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

调整大小时，看起来这个div的高度没有计算。

Phonegap：键盘在iOS 7中更改窗口高度

9 个答案: