首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > 跨浏览器开发 >

百度的手机web应用的宽度和高度自适应如何弄

2013-08-04 
百度的手机web应用的宽度和高度自适应怎么弄~手机web应用的宽度和高度应该是多少?不能留白,是要布满屏幕的

百度的手机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>

热点排行