在iOS中顯示虛擬鍵盤時固定位置不起作用

我正在開發一個使用Worklight 6.2的應用程序，其中佈局在標題中有一個固定的研究字段，當此字段收到焦點時，操作的虛擬鍵盤系統呈現。在iOS中顯示虛擬鍵盤時固定位置不起作用

當佈局不是開始的時候（被滾下來），在iOS（iPhone 4和iPhone 5的佈局大於屏幕）上運行這個應用程序，頂部固定的div和輸入（position：fixed ）會失去這種配置，並且與絕對佈局類似。另一個問題是標題（div和輸入）會自動剪切一些像素，並移動到屏幕的中心，並隱藏出現滾動頁面的div。

下面是某些情況的打印和源代碼與問題。

，而不顯示虛擬鍵盤（正確的佈局）
enter image description here

當顯示虛擬鍵盤佈局滾落
enter image description here

什麼時候滾動與顯示虛擬鍵盤頁面（丟失該配置佈局：固定並且顯然呈現配置佈局：絕對）
enter image description here

我的代碼是：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 

     <style type="text/css"> 
      a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video 
      { 
       margin: 0; 
       padding: 0; 
       font-family: 'MuseoSans-100'; 
      } 

      /* Worklight container div */ 
      body { 
       height: 100%; 
       width: 100%; 
      } 

      .div-header { 
       height: 200px; 
       width: 100%; 
       background-color: #0094D9; 
       position: fixed; 
      } 

      .input-header { 
       margin-top: 100px; 
       height: 40px; 
       width: 100%; 
      } 

      .div-body { 
       height: 500px; 
       width: 100%; 
      } 

      .div-body-1{ 
       background-color: #ffff9f; 
      } 

      .div-body-2{ 
       background-color: #1b8127; 
      } 

      .div-body-3{ 
       background-color: #fb7d00; 
      } 
     </style> 

     <script>window.$ = window.jQuery = WLJQ;</script>   
    </head> 
    <body style="display: none;"> 
     <!--application UI goes here--> 
     <div id="wrapper"> 
      <div class="div-header"> 
       <label class="span-header">Hello Worklight</label> 
       <input maxlength="50" id="txtSearch" type="text" placeholder="BarCode" class="input-header"> 
      </div> 
      <div id="div1" class="div-body div-body-1"> 
       Div 1 
      </div> 

      <div id="div2" class="div-body div-body-2"> 
       Div 2 
      </div> 

      <div id="div3" class="div-body div-body-3"> 
       Div 3 
      </div> 
     </div> 



     <script src="js/initOptions.js"></script> 
     <script src="js/main.js"></script> 
     <script src="js/messages.js"></script> 
    </body> 
</html>

來源

2014-09-01 Talysson de Castro

另外，我已經在iPhone模擬器在過去注意到這一點，但不是在一個設備。你在一個設備中測試這個嗎？ – 2014-09-02 00:07:19

是的，這張圖片是iPhone 5的屏幕截圖，同樣的問題發生在iPhone 4上。 – 2014-09-02 01:13:57

你解決了這個問題。我面臨同樣的問題。謝謝 – 2016-12-06 13:45:52