PhoneGap上的jQuery Mobile/Cordova將所有內容縮小到頂部的小空間，僅在設備上

我試圖在使用jQuery Mobile的IBM Worklight平臺上構建PhoneGap/Cordova應用程序，並且在輸出中出現了一些非常奇怪的行爲正在生成。PhoneGap上的jQuery Mobile/Cordova將所有內容縮小到頂部的小空間，僅在設備上

我的應用程序的預覽在Eclipse和桌面Web瀏覽器中顯示正常，但是當我部署到設備時，看起來header和content div擠入屏幕頂部的一個非常小的空間，如圖所示下面

enter image description here

我真的很茫然，爲什麼發生這種情況，我問過的Worklight forums但沒有響應的有幫助，我想知道，如果它的一個問題，具體到jQuery Mobile？

重現步驟：

創建一個新項目

enter.html

複製代碼
副本home.html
對CSS/JS文件調整位置
構建和部署應用程序
觀察與屏幕中顯示的行爲相同的行爲拍攝

我運行這些版本：

IBM工作燈5.0.1-299開發者版
的jQuery 1.7.2分鐘
jQuery Mobile的1.1.1
Eclipse 3.7.2
設備：iPhone 4S，Samsung Galaxy S2 & Galaxy Ace，均運行2.3.3

body元素和jQuery div元素都試圖使用「內容」的id有衝突嗎？

enter.html

<!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" /> 
     <title>Enter</title> 
     <link rel="shortcut icon" href="images/favicon.png" /> 
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png" /> 

     <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" /> 
    </head> 
    <body onload="WL.Client.init({})" id="content" style="display: none"> 

     <div data-role="page" id="enterPage"> 

      <div data-role="header"> 
       <h1>AppHeaderHere</h1> 
      </div><!-- /header --> 

      <div data-role="content"> 
       <h4 id="eventId">body here</h4> 
       <p> 

       <a href="home.html" data-role="button">Enter</a> 

       Some filler text here, this would be the actual body content 
       </p> 
      </div><!-- /content --> 

      <div data-role="footer" data-position="fixed"> 
       <h4>Footer here</h4> 
      </div> 

     </div><!-- /page --> 

     <script src="js/MyApp.js"></script> 
     <script src="js/messages.js"></script> 
     <script src="js/auth.js"></script> 
     <script src="js/jquery/jquery-1.7.2.min.js"></script> 
     <script src="js/jquery/jquery.mobile-1.1.1.js"></script> 
    </body> 
</html>

home.html的

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Home</title> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 
     <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />  
    </head> 
    <body onload="WL.Client.init({})" id="content" style="display: none"> 

     <div data-role="page" id="homePage"> 

      <div data-role="header"> 
       <h1>Home</h1> 
      </div><!-- /header --> 

      <div data-role="content"> 
       <h4 id="eventId">Some header</h4> 
       <p> 
       Body content goes here 
       </p> 
      </div><!-- /content --> 

      <div data-role="footer" data-id="foo1" data-position="fixed"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="home.html" class="ui-btn-active">Home</a></li> 
         <li><a href="page1.html">page1</a></li> 
         <li><a href="page2.html">page2</a></li> 
         <li><a href="page3.html">page3</a></li> 
         <li><a href="page4.html">page4</a></li> 
        </ul> 
       </div> 
      </div> 

     </div><!-- /page --> 

     <script src="js/MyApp.js"></script> 
     <script src="js/messages.js"></script> 
     <script src="js/auth.js"></script> 
     <script src="js/jquery/jquery-1.7.2.min.js"></script> 
     <script src="js/jquery/jquery.mobile-1.1.1.js"></script> 
    </body> 
</html>

來源

2012-08-02 Jimmy

您正在使用的預覽是動態的HTML身體的CSS改變。那裏有一個錯誤。

如果你將Firebug或任何類似的工具，你會看到它給身體的自動高度，這顛覆了jQuery Mobile CSS。只需註釋掉內聯CSS，它就可以工作。

來源

2012-08-05 06:46:25

PhoneGap上的jQuery Mobile/Cordova將所有內容縮小到頂部的小空間，僅在設備上

回答

相關問題