我的应用程序是使用 html 页面和 css 的 android phonegap 应用程序。 但是我的应用程序设计在不同的模拟器中是不同的。 我需要为所有移动设备获得相同的 UI 设计。
注意
我没用过jquery mobile
这是我的代码
<!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>
我附上了两张截图，我在不同的两个模拟器上运行，现在你可以简单地分析问题。
![图片来自Galaxy Tab][1]
来自settingFromAndroid2.2的图片底部的设计消失了，当我向下滚动时只有我可以看到。
![Android2.2][2]
要清除这些问题，我正在尝试使用页脚
假设我的设计中有文本框，
<input type="text" style="width: 80%;height: 35px;font-size:15pt;border:4px solid orange" placeholder="Email Address (User ID)" />
我无法在文本框中键入文本，我的设计在键入时折叠，这里我附上了屏幕截图和 html 文件。请查看此文件。 ![带页脚][3]
如何解决我的问题？
更新 在我上面的代码中，我只为页脚添加了这一行
<input type="text" style="width: 80%;height: 35px;font-size:15pt;border:4px solid orange" placeholder="Email Address (User ID)" />
<div data-role="footer" class="ui-bar" style="height:2px;bottom:0%;padding-bottom:0%;">
<table width=100%>
<input type="image" src="../images/Home.PNG" style="width:23%" onClick="home()"/>
<input type="image" src="../images/messages-menu.jpg" style="width:23%" onClick="inbox()"/>
<input type="image" src="../images/settings-menu.jpg" style="width:23%" onClick="settings()"/>
<input type="image" src="../images/close-menu.png" style="width:23%" onClick="callServiceFunction()"/>
</table>
</div>
</div>
</div>
</body>
</html>
最佳答案
我遇到了类似的问题，但我的显示的是菜单选项。我认为 css 位置在文本软键盘加载时被破坏。
$('#menuFooter').css('position', 'fixed');
$('#menuFooter').toggle();
关于android phonegap设计问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11132353/