Cordova / Phonegap 3.4.0 iOS 7.1 - 鍵盤/ Web查看問題

Question

我已經在這個問題上苦苦掙扎了一個多星期了，非常感謝我能得到的任何幫助。 我會按照我的理解解釋這個問題，但如果我說錯了，請糾正。

在iOS 7.0.x中，當鍵盤顯示時，Web視圖已調整大小，以便鍵盤所占用的區域不被視為視口窗口大小的一部分。 直到7.0，Cordova Keyboard插件處理此Web視圖大小調整。 由於7.0本地處理鍵盤以所需方式顯示，因此config.xml文件的Keyboard shrinkView選項在此提交時變為“No-op”：

https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a

但是，在7.1中，鍵盤占用的區域出現在Web視圖上。 這有一個痛苦的副作用。 假設你想在一個帶有textarea區域的身體前面加一個<div> （比如留下評論或聊天回復），即;

<body>
  <div id="app">...</div>
  <div id="reply">
    <textarea></textarea>
  </div>
</body>

示例CSS：

body {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}
#reply {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

無論何時聚焦或輸入文本區域，Web視圖都將本地重新定位輸入字段。 由於Web視圖仍然考慮了屏幕的整個高度，因此div不會保持固定在底部，從而打破了布局。

我嘗試過以下的事情：

與身體和固定div的CSS一起。 固定/絕對位置似乎沒有什么區別。 為身體設置明確的高度不會做任何事情。
元視口選項的所有可能組合。 這就是我目前使用的：

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, minimal-ui" />

取消注釋cordova鍵盤插件中的“No-op”。 這仍然像iOS 7.0.x中那樣打破了布局。
在input和focus事件上使用JS事件偵聽器來繼續計算底部偏移量以使div保持在底部。 這非常激動，因為它與輸入字段居中的本機Web視圖行為作斗爭。
在顯示/隱藏鍵盤后更改元標記以設置顯式高度。

我正在使用Cordova 3.4.0-0.1.3

還有其他人遇到過這個問題嗎？ 任何解決方案或想法？

Answer 1

對我來說快速修復，當輸入失去焦點時，強制窗口滾動回到位置：

$("input").on('blur',function(){

 //set brief timeout to let window catch up
 setTimout(function(){

   //reposition at top left corner of screen
   window.scrollTo(0,0);

 },20); 

});

希望有所幫助！

Answer 2

看起來Ionic有這個問題的多部分解決方案，包括根據設備動態更新元視口標簽，還可以通過掛鈎鍵盤hide / show事件，然后使用他們的滾動框架將輸入滾動到視圖中。

更多信息在這里.. http://ionicframework.com/blog/ionic-keyboard/

這需要你使用他們的框架，所以我正在將它移植到JQuery和IScroll，我會及時通知你我的進度。

我還在phonegap論壇上發布了我使用phonegap鍵盤的經驗，但還沒有得到太多回復。 https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c

Answer 3

我遇到了類似的問題。 我有一個與Sencha Touch結合使用的cordova 3.3.0應用程序。

我在iOS 7.0之前遇到的問題是當鍵盤出現時標題欄超出了屏幕頂部。 鍵盤只是用來推動整個視口。 經過大量的搜索和努力，我能夠通過實現計數器動畫來部分解決問題，在鍵盤上升時使用文本字段的焦點和模糊事件向下移動標題欄。

iOS 7.0令人高興，因為它本身解決了這個問題。 我評論了我的修復（幸運的是，沒有刪除），標題欄仍然固定在頂部，沒有任何額外的努力。

似乎iOS 7.1已經恢復了這個修復（想知道為什么??）。 當我更新到iOS 7.1時，標題欄問題又回來了，我現在別無選擇，只能取消注釋笨拙的修復。 任何人都可以提供更好或永久的解決方案來解決這個問題嗎？

Answer 4

這會解決您的問題嗎？

檢查你的html元標記是這樣的：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

替換為：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Cordova / Phonegap 3.4.0 iOS 7.1 - 鍵盤/ Web查看問題

問題描述

4 個解決方案

解決方案1
2 2014-05-02 19:02:59

解決方案2
2 2014-05-13 16:07:32

解決方案3
1 2014-04-05 17:40:15

解決方案4
1 2014-05-03 22:35:04

Cordova / Phonegap 3.4.0 iOS 7.1 - 鍵盤/ Web查看問題

問題描述

4 個解決方案

解決方案1 2 2014-05-02 19:02:59

解決方案2 2 2014-05-13 16:07:32

解決方案3 1 2014-04-05 17:40:15

解決方案4 1 2014-05-03 22:35:04

解決方案1
2 2014-05-02 19:02:59

解決方案2
2 2014-05-13 16:07:32

解決方案3
1 2014-04-05 17:40:15

解決方案4
1 2014-05-03 22:35:04