你知道一些关于'iphone css layouts'的好网站吗?你能帮我改进我的代码吗?

时间:2010-03-19 04:30:47

标签: jquery iphone css layout

我想在iphone上创建一个网页,

但我无法以简单的方式完成它,

这是我的代码:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=5.0,user-scalable=yes">

    </head>
<body onorientationchange="updateOrientation();" onload=updateOrientation()>
<div id="a">
    <input id='ab' type="button" value="button" />
</div>

<div id=b style="display: none">sssadwq dwqdqw</div>

<style type="text/css">
*{
    margin:0;
    padding:0;
    }


/* Reposition on orientation change */
body.landscape{
    height: 268px;
}
body.landscape #a{
    height:134px;
    line-height:134px;
    }

body.landscape #b{
    height:114px;
    width:470px;
    }
body{
    height: 416px;
}
#a{
    line-height:208px;
    height:208px;
    text-align:center;

}
#b{
    height:198px;
    width:310px;
    background:red;
    border:5px solid black;
}


</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">

function updateOrientation() {
      var orientation = window.orientation;
            switch (orientation) {
                    // If we're horizontal
          case 90:
          case -90:

          // Set orient to landscape
          $(document.body).addClass("landscape");
          break;  

          // If we're vertical
          default:

          // Set orient to portrait
          $(document.body).removeClass("landscape");
          break;
      }
}

$('#ab').click(function(){
    if($('#b').css('display')=='none')$('#b').css('display','block')
    else $('#b').css('display','none')
    })
</script>
</body>
</html>

它使用更多的固定数字,这不是最好的方式,我认为最好的方法是

越来越多地使用这个百分比,

你可以为我做这件事,

感谢

3 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

下载xCode,并使用DashCode。它会为你做的工作。或者,试试iWebkit

答案 2 :(得分:0)

我会研究http://www.jqtouch.com/ ...一个非常好的jQuery插件,它会为你做很多艰苦的工作。