我使用 html 和 css设计了我的phonegap android 应用程序。所以我想知道如何在所有手机中获得相同的设计尺寸。是否有可用的设置。请告诉我解决方案。提前致谢。
更新
<!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>