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

在iOS 6中一切正常。 键盘打开并将input移动到视图中。 当键盘closures时，一切都会回到原来的位置。

在iOS 7中，键盘可以正常打开，input仍然可见。 当键盘closures时，应用程序的整个下半部分都消失了。 我已经将问题跟踪到了键盘打开时窗口高度的变化，并且在closures时没有改变。

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

我试图阻止窗口resize：

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

我也试图在键盘closures后重新设置大小，但没有成功。

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

Answer 1

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

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

不知道在Phonegap中是否有更好的方法来处理这个问题，但是我把它放在CDVViewController.m文件中，创build为ios <v7和ios> v6的config.xml文件，我的应用程序以我想要的方式工作。 看起来有点乱七八糟，但不会破坏我的其他代码。

 // 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尝试了一个应用首选项插件，但不认为这是为这种偏好devise的。&#xFF09;

Answer 2

在将我的项目升级到cordova 3.1后，我开始在input字段中出现类似的问题，我没有上面列出的代码。 键盘推起来，页眉和页脚没有回到原来的位置。 我已经testing，并解决了这个问题（也许不是很优雅，但它是一种解决方法）。 我只是把这个代码放在我的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的解决scheme为我工作。 但是我仍然在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的解决scheme：

 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。 testingCordova 3.0。

Answer 5

设置您的视口元标记到您的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 6

我发现的最好的方法是把所有东西都通过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 7

经过几个小时的调查，我已经设法使其工作：

我的div，被推高了，再也没有下降，具有css属性

 position:fixed; 

我切换到

 position:absolute; 

和一切工作！

Answer 8

我有一个类似的问题，使我疯了好几天。 不知道这是否会帮助别人，但这是为我解决了这个问题:(注意我正在使用jQuery手指库来收听点击事件）：

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

对于我来说，视图中的任何textarea模糊是诀窍。 stopImmediatePropagation摆脱了一些其他的funkiness。

Answer 9

我有同样的问题，我设法跟踪到dynamic内容。 我最初是一个空的div，用javascript填充文本。 当我用静态文本填充div时，问题就消失了。

看起来这个div的高度在resize时不计算在内。