I have developed the android phonegap application using html page and css.
But My Application design is different in different emulator.
I need to get the same UI Design for all mobile devices.
How to do this?Anybody kindly help me
here my code
update
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<link rel="stylesheet" href="../js/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript">
</script>
<style type="text/css">
label.custom-select
{
position: relative;
}
.custom-select select
{
display: inline-block;
border: 2px solid #03498A;
padding: 2px 3px 3px 50px;
margin: 0;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #03498A;
color: #FFFFFF;
font-size:15pt;font:bold;
width:80%;
height:7%;
-webkit-appearance:none; /* remove the strong OSX influence from Webkit */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 2px;
}
/* for Webkit's CSS-only solution */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.custom-select select
{
padding-right:30px;
}
}
/* Since we removed the default focus styles, we have to add our own */
.custom-select select:focus
{
-webkit-box-shadow: 0 0 3px 1px #c00;
-moz-box-shadow: 0 0 3px 1px #c00;
box-shadow: 0 0 3px 1px #c00;
}
/* Select arrow styling */
.custom-select:after
{
content: "â–¼";
position: absolute;
top: 2%;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background-image: url(../images/dd.PNG);
background-repeat:no-repeat;
padding-left:80%;
color: #03498A;
pointer-events:none;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
.no-pointer-events .custom-select:after
{
content: none;
}
.dropdown
{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #03498A;
border: 1px solid;
color: #FFFFFF;
width:260px;font-size:20pt;font:bold;
}
#setting
{
margin-left:10%;
margin_right:5%;
}
#checknotify
{
margin-left:50%;
}
#checkphone
{
margin-left:38%;
}
#checklocation
{
margin-left:51%;
}
#allcauses
{
margin-left:2%;
}
#link
{
margin-left:20%;
}
#managelabel
{
margin-left:6%;
}
.checkBox
{
background-position: 0px 0px;
}
.checkBoxClear
{
background-position: -32px 0px;
}
.checkBox, .checkBoxClear
{
background-image: url('../images/Check.png');
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
cursor: hand;
}
.checkBox1
{
background-position: 0px 0px;
}
.checkBoxClear1
{
background-position: -32px 0px;
}
.checkBox1, .checkBoxClear1
{
background-image: url('../images/Check.png');
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
cursor: hand;
}
.checkBox2
{
background-position: 0px 0px;
}
.checkBoxClear2
{
background-position: -32px 0px;
}
.checkBox2, .checkBoxClear2
{
background-image: url('../images/Check.png');
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
cursor: hand;
}
.checkBox3
{
background-position: 0px 0px;
}
.checkBoxClear3
{
background-position: -32px 0px;
}
.checkBox3, .checkBoxClear3
{
background-image: url('../images/Check.png');
background-repeat: no-repeat;
display: inline-block;
float: left;
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
cursor: hand;
}
</style>
</head>
<body >
<div>
<div><input type="image" style="width:100%" src="../images/set.png" />
</div>
<div align="center" style="margin-top:2%"><input type="image" src="../images/load.png" style="width:90%" />
<input type="image" src="../images/image.png" style="width:90%"/>
<div style="margin-top:5%">
<label id="managelabel" style="width:70%;font-size:12pt">Manage Cause Settings</label>
<a id="link" href="javascript:help()">Help ?</a>
</div>
</div>
<div id="loadingScreen" align="center"></div>
<div align="center" style="margin-top:5%"><label class="custom-select"><select name="mydropdown" style="width:90%;height:10%;font-size:15pt" >
<option id="0" value="opt">option</option>
</select></label>
</div>
<div style="margin-top:3%;padding:5%">
<table>
<tr width="100%">
<td width="90%"><label>One</label></td>
<td><div id="Div1" class="checkBox"> </div></td>
<label for="Div1"></label>
<td><input value='' type='checkbox' style="display:none" /></td>
</tr>
<tr width="100%">
<td ><label>Two</label></td>
<td><div id="Div2" class="checkBox1"> </div></td>
<label for="Div2"></label>
<td><input value='' type='checkbox' style="display:none" /></td>
</tr>
<tr width="100%">
<td ><label>Three</label></td>
<td><div id="Div3" class="checkBox2"> </div></td>
<label for="Div3"></label>
<td><input value='' type='checkbox' style="display:none" /></td>
</tr>
</table>
</div>
<br/>
<div>
<table>
<tr width="100%">
<td><div id="Div4" class="checkBox3"> </div></td>
<label for="Div4"></label>
<td><label style="width:60%;font-size:12pt">Here settings</label></td>
<td><input value='' type='checkbox' style="display:none" id='chkAllCauses'/></td>
</tr>
</table>
</div>
</div>
<div style="margin-top:32%">
<div style="border-width:3px;padding-top:2%;padding-bottom:2%;padding-right:0px;padding-left:0px;background-color:#00458D;bottom:0;" align="center">
<table width=100%>
<input type="image" src="../images/first.PNG" style="width:23%" />
<input type="image" src="../images/second.jpg" style="width:23%" />
<input type="image" src="../images/third.jpg" style="width:23%" />
<input type="image" src="../images/fourth.png" style="width:23%"/>
</table>
</div>
</div>
</div>
</body>
</html>
First I would try adding the following meta tags to your code:
If that doesn’t help across the emulators then please let us know exactly what is breaking in the UI, try and take some screenshots to help us understand the problem.