same Design for All Mobile Devices
Question
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>
1 answers
solution1
0 ACCPTED 2012-06-18 14:37:17
First I would try adding the following meta tags to your code:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Android: design does not same for all devices
Different design desktop/mobile devices
How to get a mobile webpage to display the same on all devices
Layout design responsive for all devices
Responsive design for all android devices
Designing Calculator for all Mobile Devices
Disable scrolling in all mobile devices
Need same design for different types of devices in android
How to design layout for all real devices in Android?
Design drawables to maintain proportions in all devices
Related Tags