百度的手机web应用的宽度和高度自适应怎么弄~
手机web应用的宽度和高度应该是多少?不能留白,是要布满屏幕的意思吗?这是我做的应用http://zhanzhanggongju.duapp.com/ 提交时,反馈的邮件说宽度和高度不对,且没有宽度和高度自适应;我看了百度的调整高度api(http://developer.baidu.com/wiki/index.php?title=%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3%E9%A6%96%E9%A1%B5/%E7%A7%BB%E5%8A%A8web%E5%BA%94%E7%94%A8%E6%8E%A5%E5%85%A5/%E5%AF%B9%E6%8E%A5%E9%A1%BB%E7%9F%A5),但是水平不够还是不清楚应该怎么操作,有没有简单易懂的方法? 手机 百度 Web?App Web
[解决办法]
我也水平不够,帮不了你。求高手现身解答~~
[解决办法]
这个做的应该还不够,我在手机上试了下,下半部分还有很大的空白,应该在加上JS来获取宽高,在%来设定
[解决办法]
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta charset="utf-8">
<title>站长工具箱</title>
<style>
html body{
height: 95%;
}
body{
padding: 0;
margin: 0;
position: absolute;
width: 100%;
}
.box{
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
}
.welcome{
background-image: url(http://zhanzhanggongju.duapp.com/images/home.png);
background-repeat: no-repeat;
background-position: center;
height: 100px;
}
.menu{
width: 300px;
padding: 0;
margin: 0 auto;
list-style: none;
display: block;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
}
.menu>li{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
vertical-align: middle;
}
.menu>li>h2{
display: block;
padding: 0;
margin: 0;
display: table-cell;
height: 100%;
}
.menu>li>a>image{
width: 300px;
height: 40px;
border: 0;
}
.copy{
text-align: center;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body style="padding: 0;margin: 0;">
<div class="box" style="width: 100%;height: 100%;">
<div class="welcome"></div>
<ul class="menu">
<li><h2><a href="fun/zengze.php"><img src="http://zhanzhanggongju.duapp.com/images/zengze.png"></a></h2></li>
<li><h2><a href="fun/md5.php"><img src="http://zhanzhanggongju.duapp.com/images/md5.png"></a></h2></li>
<li><h2><a href="fun/sha1.php"><img src="http://zhanzhanggongju.duapp.com/images/sha1.png"></a></h2></li>
<li><h2><a href="fun/urlen.php"><img src="http://zhanzhanggongju.duapp.com/images/urldo.png"></a></h2></li>
<li><h2><a href="fun/urlde.php"><img src="http://zhanzhanggongju.duapp.com/images/urlde.png"></a></h2></li>
<li><h2><a href="fun/asciito.php"><img src="http://zhanzhanggongju.duapp.com/images/toascii.png"></a></h2></li>
<li><h2><a href="fun/toascii.php"><img src="http://zhanzhanggongju.duapp.com/images/asciito.png"></a></h2></li>
</ul>
<div class="copy">
<p style="display: inline-block;">第十届齐鲁软件设计大赛参赛作品</p>
<a href="http://tongji.baidu.com/hm-web/welcome/ico?s=40f17d1ddf918aa4ef98fe9639d88884" target="_blank"><img border="0" src="http://eiv.baidu.com/hmt/icon/21.gif" width="20" height="20"></a>
</div>
</div>
</body>
</html>