2013-10-03 83 views
12

在iOS 6中,一切正常。鍵盤打開並將輸入移動到視圖中。當鍵盤關閉時,一切都會回到它應該在的位置。Phonegap:鍵盤更改iOS 7中的窗口高度

在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。

+0

現在我的計劃是下載一個Xcode 4.6,將iOS6 SDK拉出來,然後用它編譯。任何對實際問題的解決方案都非常感激。 – jdehlin

+0

這不是真正的問題的答案,但我已經通過將應用程序設置爲使用iOS 6.1作爲基本SDK來解決此問題,並且事情按預期工作。 – jdehlin

回答

7

我也看到了。高度改變後,我們的一些絕對定位元素從屏幕底部消失。

我發現在ios7中使用KeyBoardShrinksView = false時,window.height保持不變。這是與ios6相反,所以有點趕上22.

不知道是否有更好的方式來處理Phonegap中的這個,但我把它放在CDVViewController.m中,創建爲config.xml文件爲ios < v7和ios> v6,我的應用程序以我想要的方式工作。看起來有點冒險,但不會破壞我的其他代碼。

// 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但不認爲這是專爲這種偏好。)

+1

雖然我仍然沒有完整的解決方案。我的應用程序的另一部分與您在鍵盤隱藏後完全丟失頁面底部時的問題相同。使事情複雜化,切換KeyBoardShrinksView使這個場景在ios7中正常工作,但在ios6中不太好... – Paul

+3

再次回答我自己的問題,但在進一步的調查中,我發現在我的視口meta標記中添加height = device-height應用程序的HTML頁面修復了從網頁底部切掉的東西的問題。奇怪的是,KeyboardShrinksView = false似乎在ios7中對我更好。儘管設置爲「假」,但當鍵盤處於活動狀態時,視圖似乎可以很好地調整大小。有了這個組合,我的ios7版本的應用程序實際上可以比現在的早期版本更好。 (我也使用phonegap 2.7。) – Paul

+0

我沒有最終這樣做,但它似乎是一個可行的解決方案。 – jdehlin

1

你的視口元標記設置你的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" > 
+1

我使用了設備高度,它似乎沒有任何影響。另外,iPad上運行的僅iPhone應用程序存在一個問題,在iOS7中設置height = device-height時,只有一小部分應用程序可見。我的應用程序實際上被拒絕了,因此我必須刪除該設置。 – jdehlin

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="...">並設置設備

+0

爲什麼你在例子中乘以2? (newFrame.size.height * 2) – opznhaarlems

0

高度我有這樣的驅使我堅果幾天類似的問題。不知道這是否會幫助其他人,但是這是解決這對我(注:我使用jQuery手指圖書館聽挖掘事件):

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

對於我在任何的調用textarea的模糊視圖是訣竅。 stopImmediatePropagation擺脫了其他一些funkiness。

2

Petrash的解決方案爲我工作。但我在iPad上支持旋轉仍然存在問題。 所以,在同一個CDVViewController中。M I已經添加了這種方法:

- (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 =假

這是哈克,但它的工作從5.1到7.0.3。測試Cordova 3.0。

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); 
}); 
+2

謝謝你,有幾個HTML5 webapps(不是科爾多瓦/ Phonegap)永遠有這個問題,你的解決方案完美無缺。 –

+0

我應該在哪裏放這個代碼?我是新來的電話缺口,面臨這個問題。預先感謝您的Javascript文件中的 –

+0

,並且JS文件應該包含在html頁面中,就像任何常規網頁一樣。請務必將代碼放入頁面就緒功能中。 – VicM

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> 
0

我有同樣的問題,我設法追蹤到動態內容。 我最初有一個空的div,裏面用javascript填充文本。 當我用靜態文本填充div時,問題消失了。

看起來像這個div的高度在調整大小時不計算在內。

1

後調查的時間我已經成功地得到它的工作:

我格,也就是向上推再也爬不起來的下降, 有CSS屬性

position:fixed; 

我交換這到

position:absolute; 

和一切工作!