私は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エミュレーターでの私のデザイン
GalaxyTabでのデザイン
Android4.2でのデザイン
