私はhtmlとcssを使用してphonegapandroidアプリケーションを設計しました。だから、すべての携帯電話で同じデザインサイズを取得する方法を知りたいのですが、利用可能な設定はありますか？解決策を教えてください。前もって感謝します。
アップデート
<!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>