我在 android phonegap 中开发了应用程序。我有页眉、页脚和 8个文本框。但是我在不同的模拟器中得到了不同的设计。它没有正确安装在所有移动设备中。
请指导我。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="inmobi-site-verification" content="d7e348f871ce2cfa2baee7c23da4d1d8">
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="../js/main.js"></script>
<link rel="stylesheet" href="../js/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="../js/cordova-1.7.0.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#footer {
position:absolute;
bottom:0;
width:100%;
}
ul.sidemenu
{
padding:0;
margin:0;
list-style:none;
font-size:2em;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
width:260px;
border-radius:5px 5px 5px 5px;
background-color:#FFFFFF;
}
.searchbox input {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-top:0.2cm;
margin-left:1cm;
width:70%;
height: 32px;
float: left;
font-size:15pt;
padding: 2px;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-left: 4px solid orange;
}
.sea input {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-top:0.2cm;
background-image: url(sea.PNG);
color: #fff;
font-weight: bold;
width:10%;
height: 43px;
border: 0;
float: left;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-right: 4px solid orange;
}
</style>
</head>
<body id="body">
<div id="header" style="top;0;width:100%">
<div style="height:10%;border-width:3px;border-height:6px;background-color:#00458D;" align="center">
<h1>Header</h1>
</div>
</div>
<br>
<table>
<tr>
<td></td>
<td></td>
<td><label style="font-size:12pt">Choose one of the following options to search our directory of causes</label></td>
<td></td>
<td></td>
</tr>
</table>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox" placeholder="Search"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox" placeholder="Search"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox" placeholder="Search"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox" placeholder="Search"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox" placeholder="Search"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox" placeholder="Search"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox" placeholder="Search"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox" placeholder="Search"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<div id="footer" >
<div style="height:15%;border-width:3px;border-height:6px;background-color:#00458D;" align="center">
<h3>Footer</h3> </div>
</div>
</body>
</html>
我在 Droid 模拟器中的设计
Galaxy Tab 中的设计
Android 4.2 中的设计