android phonegap設計

-1

我設計了我的phonegap android應用程序使用html和 css。所以我想知道如何獲得相同的設計大小在所有的手機。是否有任何設置 available.Please告訴我的解決方案。在此先感謝。android phonegap設計

更新

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <title> 
     </title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
     <link rel="stylesheet" href="my.css" /> 
     <style> 
      /* App custom styles */ 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
     </script> 
     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 
     </script> 
     <script src="my.js"> 
     </script> 
    </head> 

<style> 
    #searchwrapper { 
width:90%; 
height:48px; 
background-image:url(../images/input-box.png); 
background-repeat:no-repeat; 
background-size: 100% 100%; 
margin-left:15px; 
position:relative; 
} 

.searchbox { 
border:0px; 
background-color:transparent; 
position:absolute; 
top:4px; 
left:9px; 
width:86%; 
height:34px; 
} 

.searchbox_submit { 
border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; 
border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; 
border:0px; 
background-color:transparent; 
position:absolute; 
top:4px; 
left:90%; 
width:9%; 
height:40px; 
} 

#searchwrapperIC { 
width:90%; 
height:48px; 
background-image:url(../images/input-box.png); 
background-repeat:no-repeat; 
background-size: 100% 100%; 
margin-left:15px; 
position:relative; 
} 

.searchboxIC { 
border:0px; 
background-color:transparent; 
position:absolute; 
top:4px; 
left:9px; 
width:86%; 
height:34px; 
} 

.searchbox_submitIC { 
border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; 
border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; 
border:0px; 
background-color:transparent; 
position:absolute; 
top:4px; 
left:90%; 
width:9%; 
height:40px; 
} 
body { 
font-family:Arial,Geneva,Verdana,sans-serif; 
font-size: 0.8em; 
overflow-x: hidden; 
} 
#loadingScreen { 
background: url(../images/ajax-loader.gif) no-repeat 5px 8px; 
padding-left: 25px; 
} 
/* hide the close x on the loading screen */ 
.loadingScreenWindow .ui-dialog-titlebar-close { 
display: none; 
} 
.checkBox 
{ 
     background-position: 0px 0px; 
} 
    .checkBoxClear 
{ 
     background-position: -32px 0px; 
} 
    .checkBox, .checkBoxClear 
{ 
     background-image: url('../images/CheckBox2.png'); 
     background-repeat: no-repeat; 
     display: inline-block; 
     float: left; 
     width: 32px; 
     height: 32px; 
     padding: 0px; 
     margin: 0px; 
     cursor: hand; 
} 
</style> 
    <body> 
     <!-- Home --> 
     <div data-role="page" id="page1" style="background-color:white"> 
      <div data-theme="a" data-role="header"> 

       <img src="images/header-search-causes.png" alt="image" style="width:100%" /> 

      </div> 
      <div data-role="content" style="padding: 16px"> 
      <br>  
    <label style="font-size:12pt" align="center">Choose one of the following options to search our directory of causes</label></td> 
    <br/> 

     <div id="searchwrapper" style="width:90%;"align="center"> 
      <input type="text" class="searchbox" name="s" value="" placeholder="Search" /> 
      <img src="images/search-button.png" alt="image" class="searchbox_submitIC" /> 

     </div> 
     <br/> 
       <li style="list-style:none" data-theme="b"> 
         <a href="#page1" data-transition="slidefade">Button</a><br/> 
         <a href="#page1" data-transition="slidefade">Button</a><br/> 
         <a href="#page1" data-transition="slidefade">Button</a><br/> 
         <a href="#page1" data-transition="slidefade">Button</a><br/> 

        </li> 
      </div> 
      <div style="margin-top:4%;border-width:3px;padding-top:2%;background-color:#00458D;" align="center" data-theme="#00458D" data-role="footer" data-position="fixed"> 

       <table width=100%> 
       <tr><td></td></tr> 
       <tr> 
       <img src="images/Home.PNG" alt="image" style="width:20%;height:6%;" /> 
       <img src="images/messages-menu.jpg" alt="image" style="width:20%;height:6%;" /> 
       <img src="images/settings-menu.jpg" alt="image" style="width:20%;height:6%;" /> 
       <img src="images/close-menu.png" alt="image" style="width:20%;height:6%;" /> 

       </tr> 
       </table> 

      </div> 
     </div> 
     <script> 
      //App custom javascript 
     </script> 
    </body> 
</html>

來源

2012-06-25 user1324068

如果你正在做不jQuery Mobile的，你所要做的動態佈局尺寸的內容，如

你必須使用百分比高度和寬度
將風格設爲html身體位置相對
將風格位置絕對賦予內身元素

注意：使用jquery移動框架設計佈局非常容易做出一個好的和豐富的佈局。而且你不需要爲各種手機尺寸煩惱。它可以自動管理。

來源

2012-06-26 12:29:21 Akilan

只是爲輸入字段頁面設置固定頁腳。虛擬鍵盤使頁腳跳躍。 – Akilan

它不工作更新我的代碼和設計 – user1324068

android phonegap設計

回答

相關問題